bicc/SALW_control_in_Africa
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

full functional

Browse Source
This commit is contained in:
louai98 2024-05-08 16:21:43 +02:00
parent bb21288904
commit 2305ddeec0
88 changed files with 29288 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2130
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -6,9 +6,18 @@
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"leaflet": "^1.9.4",
"node-sass": "^7.0.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-select": "^5.8.0",
"sass": "^1.77.0",
"swiper": "^11.0.2",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

6
public/index.html
View File

@ -24,6 +24,12 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>

3
src/App.css
View File

@ -36,3 +36,6 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

34
src/App.js
View File

@ -1,24 +1,22 @@
import logo from './logo.svg'; import logo from "./logo.svg";
import './App.css'; import "./App.css";
import NavBarSalw from "./Components/Layout/NavBarSalw/NavBarSalw.js";
import SwiperSalw from "./Components/Layout/SwiperSalw/SwiperSalw.js";
import MainDescription from "./Components/Layout/MainDescription/MainDescription.js";
import WeaponAmmuBut from "./Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js";
import CarouselsSalw from "./Components/Layout/CarouselsSalw/CarouselsSalw.js";
function App() { function App() {
return ( return (
<div className="App"> <>
<header className="App-header"> <NavBarSalw></NavBarSalw>
<img src={logo} className="App-logo" alt="logo" /> {/* <CarouselsSalw></CarouselsSalw> */}
<p> {/* <MainDescription></MainDescription> */}
Edit <code>src/App.js</code> and save to reload. {/* <WeaponAmmuBut></WeaponAmmuBut> */}
</p> </>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
); );
} }

294
src/Components/Layout/AfricaMap/AfricaMap-V1.js Normal file
View File

@ -0,0 +1,294 @@
import React, { createRef, usePrevious } from "react";
import { MapContainer, GeoJSON } from "react-leaflet";
import L from "leaflet";
import Africa from "../../../Data/TestAfrica.geojson";
import "./AfricaMap.css";
import "./ZoomControl.css";
import {
CountryStyle,
CountrySelectedStyle,
CountryHighlightStyle,
} from "./countryStyles";
class AfricaMap extends React.Component {
constructor(props) {
super(props);
this.mapRef = createRef(); // Create a ref to store the MapContainer instance
this.geoJsonLayerRef = createRef(); // Create a ref to store the GeoJSON layer instance
this.state = {
center: [3, 15],
zoom: 4,
africaCountries: null,
loading: true,
error: null,
selectedCountryName: null,
previousSelectedCountry: null,
selectedFeature: null,
previousFeature: null,
scrollWheelZoom: false,
selectedFilterCountry: null,
};
}
componentDidUpdate(prevProps, prevState) {
// Check if selectedFeature has changed
if (this.state.selectedFeature !== prevState.selectedFeature) {
// Update previousFeature with the previous value of selectedFeature
this.setState({ previousFeature: prevState.selectedFeature });
}
// Check if selectedFilterCountry has changed
if (this.props.selectedFilterCountry !== prevProps.selectedFilterCountry) {
const selectedCountryName = this.props.selectedFilterCountry.value;
// Check if a country is selected
if (selectedCountryName) {
// Get the Leaflet map instance from the mapRef
const map = this.mapRef.current;
console.log("map:", map);
map.eachLayer((layer) => {
if(layer.feature && layer.feature.properties.name === selectedCountryName) {
console.log("layer:", layer.feature.properties.name);
layer.setStyle(CountrySelectedStyle);
}
})
const layers = this.geoJsonLayerRef.current.getLayers();
let selectedFeature = null;
layers.forEach((layer) => {
if (layer.feature.properties.name === selectedCountryName) {
selectedFeature = layer;
}
});
if (selectedFeature) {
// Update state to reflect the selected country and feature
this.setState(
{
selectedCountryName: selectedCountryName,
selectedFeature: selectedFeature,
},
() => {
console.log(
"Setting style for selected country:",
selectedCountryName,
selectedFeature
);
selectedFeature.setStyle(CountrySelectedStyle);
}
);
}
} else {
console.log("No country selected");
// Reset style for the previously selected country
if (prevState.selectedFeature) {
prevState.selectedFeature.setStyle(
CountryStyle(prevState.selectedFeature)
);
}
// Update state to reflect no selected country
this.setState({
selectedCountryName: null,
selectedFeature: null,
});
}
}
}
componentDidMount() {
this.fetchAfricaCountries();
this.calculateZoomLevel();
window.addEventListener("resize", this.calculateZoomLevel);
}
componentWillUnmount() {
window.removeEventListener("resize", this.calculateZoomLevel);
}
fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
this.setState(
{
africaCountries: data.features,
loading: false,
},
() => {}
);
} catch (error) {
this.setState({
error: error,
loading: false,
});
}
};
calculateZoomLevel = () => {
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
this.setState({ zoom: 3 });
} else if (screenWidth <= 1024) {
this.setState({ zoom: 4 });
} else {
this.setState({ zoom: 4 });
}
};
onEachFeature = (feature, layer) => {
// Bind event to layer
layer.on({
mouseover: this.onMouseOver,
mouseout: this.onMouseOut,
click: this.onMouseClick,
});
};
onMouseOver = (e) => {
e.target.setStyle(CountryHighlightStyle());
};
onMouseOut = (e) => {
// Check if a country is selected
if (
this.state.selectedCountryName === null ||
this.state.selectedCountryName !== e.target.feature.properties.name
) {
// Reset style only if no country is selected or the selected country is not the one triggering the mouseout
e.target.bringToBack();
e.target.setStyle(CountryStyle());
}
};
onMouseClick = (e) => {
const countryName = e.target.feature.properties.name;
const popupContent = `<h5>Selected: ${countryName}</h5>`;
if (this.state.selectedCountryName === null) {
this.setState(
{
previousSelectedCountry: this.state.selectedCountryName,
selectedCountryName: countryName,
previousFeature: this.state.selectedFeature,
selectedFeature: e.target,
},
() => {
setTimeout(() => {
console.log(e.target);
e.target.setStyle(CountrySelectedStyle());
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}, 10);
}
);
} else if (this.state.selectedCountryName === countryName) {
this.setState(
{
selectedCountryName: null,
selectedFeature: null,
},
() => {
setTimeout(() => {
e.target.setStyle(CountryStyle());
e.target.unbindTooltip();
}, 10);
}
);
} else {
this.setState(
{
previousSelectedCountry: this.state.selectedCountryName,
selectedCountryName: countryName,
previousFeature: this.state.selectedFeature,
selectedFeature: e.target,
},
() => {
setTimeout(() => {
if (this.state.previousFeature) {
this.state.previousFeature.setStyle(CountryStyle());
this.state.previousFeature.unbindTooltip();
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}
e.target.setStyle(CountrySelectedStyle());
}, 10);
}
);
}
};
resetMap = () => {
if (this.mapRef.current) {
this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values
}
};
zoomIn = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1);
}
};
zoomOut = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1);
}
};
render() {
const { africaCountries, loading, error } = this.state;
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<>
<div id="map" className="map-container">
<MapContainer
center={this.state.center}
zoom={this.state.zoom}
ref={this.mapRef}
zoomControl={false}
style={{ width: "100%", height: "100%" }}
scrollWheelZoom={this.state.scrollWheelZoom}
>
{africaCountries && (
<>
<GeoJSON
ref={this.geoJsonLayerRef}
onEachFeature={this.onEachFeature}
id="africa-map"
style={(feature) => CountryStyle(feature)}
key="africa-map"
data={africaCountries}
/>
</>
)}
<div className="custom-zoom-control">
<button onClick={this.zoomIn}>+</button>
<button onClick={this.zoomOut}>-</button>
<button onClick={this.resetMap}>*</button>
</div>
</MapContainer>
</div>
</>
);
}
}
export default AfricaMap;

136
src/Components/Layout/AfricaMap/AfricaMap-V2.js Normal file
View File

@ -0,0 +1,136 @@
import React, { useState, useEffect } from "react";
import { MapContainer, TileLayer, GeoJSON, ZoomControl } from "react-leaflet";
import africaGeoJSON from "../../../Data/TestAfrica.geojson";
import Classes from "./AfricaMap.module.css";
import "./AfricaMap.css";
import "./ZoomControl.css";
import {
CountryStyle,
CountrySelectedStyle,
CountryHighlightStyle,
} from "./countryStyles";
const AfricaMap = () => {
const [selectedCountry, setSelectedCountry] = useState(null);
const [africaCountries, setAfricaCountries] = useState([]);
const [loading, setLoading] = useState(true);
const [center, setCenter] = useState([3, 15]);
const [zoom, setZoom] = useState(4);
const [selectedCountryName, setSelectedCountryName] = useState(null);
const [previousSelectedCountry, setPreviousSelectedCountry] = useState(null);
const [selectedFeature, setSelectedFeature] = useState(null);
const [previousFeature, setPreviousFeature] = useState(null);
useEffect(() => {
const fetchAfricaCountries = async () => {
try {
const response = await fetch(africaGeoJSON);
const data = await response.json();
setAfricaCountries(data.features);
setLoading(false);
} catch (e) {
console.log(e);
setLoading(false);
}
};
fetchAfricaCountries();
}, []);
useEffect(() => {
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
setZoom(3);
} else if (screenWidth <= 1024) {
setZoom(4);
} else {
setZoom(4);
}
}, []);
const highlightFeature = (e) => {
setSelectedCountry(e.target.feature.properties.name);
};
const resetHighlight = () => {
setSelectedCountry(null);
};
const onMouseClick = (e) => {
const countryName = e.target.feature.properties.name;
const popupContent = `<h5>Selected: ${countryName}</h5>`;
console.log("selectedCountryName:", selectedCountryName);
if (selectedCountryName === null || selectedCountryName !== countryName) {
setSelectedCountryName(countryName);
//setSelectedFeature(e.target);
//setPreviousFeature(selectedFeature);
//setPreviousSelectedCountry(selectedCountryName);
setTimeout(() => {
e.target.setStyle(CountrySelectedStyle());
e.target
.bindTooltip(popupContent, {
permanent: true,
direction: "top",
className: "tooltip-custom",
})
.openTooltip();
}, 10);
} else {
setSelectedCountryName(null);
setSelectedFeature(null);
setTimeout(() => {
e.target.setStyle(CountryStyle());
e.target.unbindTooltip();
}, 10);
}
};
return (
<div id="map" className={Classes["map-container"]}>
<div className={Classes["map-controls"]}>
<select
value={selectedCountry}
onChange={(e) => setSelectedCountry(e.target.value)}
>
<option value="">Select a country</option>
{africaCountries.map((feature, index) => (
<option key={index} value={feature.properties.name}>
{feature.properties.name}
</option>
))}
</select>
</div>
{loading ? (
<p>Loading...</p>
) : (
<MapContainer
center={center}
zoom={zoom}
zoomSnap={0.25}
zoomDelta={0.5}
zoomControl={false} // Disable default zoom control
style={{ width: "100%", height: "100%" }}
>
{/* <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> */}
<GeoJSON
data={africaCountries}
style={(feature) => CountryStyle(feature)}
onEachFeature={(feature, layer) => {
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
click: onMouseClick,
});
}}
/>
<ZoomControl position="topright"></ZoomControl>
</MapContainer>
)}
</div>
);
};
export default AfricaMap;

112
src/Components/Layout/AfricaMap/AfricaMap.css Normal file
View File

@ -0,0 +1,112 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.map-filter-box{
border: 1px solid #acabab;
}
.leaflet-container {
/* height: 100vh; */
background-color: white;
}
.map-container {
width: 100%; /* Set width to fill the available space */
height: 100vh; /* Set height to fill the viewport height */
/* border: solid 1px #333; */
}
.matrix {
display: grid;
grid-template-columns: repeat(4, 20px); /* Adjust width of each rectangle as needed */
grid-template-rows: repeat(3, 20px); /* Adjust height of each rectangle as needed */
gap: 3px; /* Adjust gap between rectangles as needed */
}
.rectangle {
background-color: #ffffff; /* Adjust rectangle color as needed */
border: 1px solid #000; /* Adjust border color and thickness as needed */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px; /* Adjust font size as needed */
}
.matrix-treaties-map {
display: grid;
grid-template-columns: repeat(3, 20px); /* Adjust width of each rectangle as needed */
grid-template-rows: repeat(2, 20px); /* Adjust height of each rectangle as needed */
gap: 3px; /* Adjust gap between rectangles as needed */
}
.filters-box{
/* border: 1px solid #333333; */
padding: 3px;
}
.regional-organisations {
display: grid;
grid-template-columns: repeat(3, 30%); /* Adjust width of each rectangle */
grid-template-rows: repeat(2, 25%); /* Adjust height of each rectangle */
gap: 3px; /* Adjust gap between rectangles */
}
.organization-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px;
}
.organization-item:hover {
opacity: 0.8;
}
.name {
font-size: 12px;
}
.treaty-item {
display: grid;
grid-template-columns: repeat(4, 25%);
margin-bottom: 15px;
}
.treaty-item-name {
font-size: 12px;
}
.icon{
width: 50px;
height: 50px;
cursor: pointer;
}
.icon-2{
width: 35px;
height: 35px;
cursor: pointer;
}
.treaty-item-2 {
display: grid;
grid-template-columns: repeat(2, 75%);
margin-bottom: 15px;
}
.tooltip-custom {
position: absolute;
z-index: 1000; /* Ensure tooltip appears above map layers */
pointer-events: auto; /* Enable click events on the tooltip */
}

659
src/Components/Layout/AfricaMap/AfricaMap.js Normal file
View File

@ -0,0 +1,659 @@
import React, { createRef } from "react";
import Stack from "react-bootstrap/Stack";
import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
import L, { control } from "leaflet";
import Africa from "../../../Data/TestAfrica.geojson";
import "../../../Styles/main.scss";
import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
import Icon1 from "../../../Icons/icon1.svg";
import Icon2 from "../../../Icons/icon2.svg";
import Icon3 from "../../../Icons/icon3.svg";
import Icon4 from "../../../Icons/icon4.svg";
import Icon5 from "../../../Icons/icon5.svg";
import Icon6 from "../../../Icons/icon6.svg";
import Icon7 from "../../../Icons/icon7.svg";
import Icon8 from "../../../Icons/icon8.svg";
import Icon9 from "../../../Icons/icon9.svg";
import Icon10 from "../../../Icons/icon10.svg";
import Icon11 from "../../../Icons/icon11.svg";
import Icon12 from "../../../Icons/icon12.svg";
import Icon13 from "../../../Icons/icon13.svg";
import Icon14 from "../../../Icons/icon14.svg";
import Icon15 from "../../../Icons/icon15.svg";
import Icon16 from "../../../Icons/icon16.svg";
import Icon17 from "../../../Icons/icon17.svg";
import Icon18 from "../../../Icons/icon18.svg";
import Icon19 from "../../../Icons/icon19.svg";
import Icon20 from "../../../Icons/icon20.svg";
import Icon21 from "../../../Icons/icon21.svg";
import Icon22 from "../../../Icons/icon22.svg";
import Icon23 from "../../../Icons/icon23.svg";
import Icon24 from "../../../Icons/icon24.svg";
import Icon25 from "../../../Icons/icon25.svg";
import Icon26 from "../../../Icons/icon26.svg";
class AfricaMap extends React.Component {
constructor(props) {
super(props);
this.mapRef = createRef(); // Create a ref to store the MapContainer instance
this.state = {
africaCountries: null,
countriesNames: [],
loading: true,
error: null,
center: [3, 15],
zoom: 4,
scrollWheelZoom: false,
selectedCountry: "",
openedTooltipLayer: null,
selectedCountriesFilter: [],
selectedCountryColor: "yellow",
selectedRegion: "",
};
}
componentDidMount() {
this.fetchAfricaCountries();
this.calculateZoomLevel();
window.addEventListener("resize", this.calculateZoomLevel);
}
componentWillUnmount() {}
fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
this.setState(
{
africaCountries: data.features,
countriesNames: data.features
.map((feature) => feature.properties.name)
.sort(),
loading: false,
},
() => {}
);
} catch (error) {
this.setState({
error: error,
loading: false,
});
}
};
calculateZoomLevel = () => {
const screenWidth = window.innerWidth;
if (screenWidth <= 768) {
this.setState({ zoom: 3 });
} else if (screenWidth <= 1024) {
this.setState({ zoom: 4 });
} else {
this.setState({ zoom: 4 });
}
};
resetMap = () => {
if (this.mapRef.current) {
this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values
}
};
zoomIn = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1);
}
};
zoomOut = () => {
if (this.mapRef.current) {
this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1);
}
};
handleCountryChange = (e) => {
const countryName = e.target.value;
this.setState({ selectedCountry: countryName }, () => {
this.openTooltipForCountry(countryName);
});
};
onEachFeature = (feature, layer) => {
// Bind event to layer
layer.on({
//mouseover: this.onMouseOver,
//mouseout: this.onMouseOut,
click: this.onMouseClick,
});
};
openTooltipForCountry = (countryName) => {
const { africaCountries } = this.state;
if (!africaCountries) return;
const feature = africaCountries.find(
(feature) => feature.properties.name === countryName
);
if (!feature) return;
const { openedTooltipLayer } = this.state;
if (openedTooltipLayer) {
openedTooltipLayer.closeTooltip(); // Close the previously opened tooltip
}
const popupContent = `<h5>Selected: ${countryName}</h5>`;
const layer = L.geoJSON(feature);
const tooltip = L.tooltip({
permanent: true,
direction: "top",
className: "tooltip-custom",
}).setContent(popupContent);
layer.bindTooltip(tooltip).openTooltip();
// Update the state to store the currently opened tooltip
this.setState({ openedTooltipLayer: layer });
};
onMouseClick = (e) => {
this.setState({
selectedCountriesFilter: [],
selectedCountryColor: "yellow",
});
const countryName = e.target.feature.properties.name;
if (countryName === this.state.selectedCountry) {
this.setState({ selectedCountry: "" });
return;
}
this.setState({ selectedCountry: countryName });
};
handleOrganizationClick = (name, status, color) => {
if (this.state.selectedRegion === name) {
this.setState({
selectedCountriesFilter: [],
selectedCountryColor: "yellow",
selectedCountry: "",
selectedRegion: "",
});
return;
}
this.setState({
selectedCountriesFilter: [],
selectedCountryColor: color,
selectedCountry: "",
selectedRegion: name,
});
// Regional Organisation + International Guidelines & Instruments + African Guidelines & Instrumentss
this.state.africaCountries.map((feature) => {
if (feature.properties[name] === 1) {
this.setState((prevState) => ({
selectedCountriesFilter: [
...prevState.selectedCountriesFilter,
feature.properties.name,
],
}));
}
});
// Regional Treaties + International Treaties
this.state.africaCountries.map((feature) => {
if (feature.properties[name] === status) {
this.setState((prevState) => ({
selectedCountriesFilter: [
...prevState.selectedCountriesFilter,
feature.properties.name,
],
}));
}
});
};
render() {
const findColorByName = (name) => {
const org = regional_organisations.find((org) => org.name === name);
return org ? org.color : ""; // Return color value if found, otherwise return an empty string
};
const regional_organisations = [
{ name: "AU", color: "#b2df8a" },
{ name: "EAC", color: "#33a02c" },
{ name: "IGAD", color: "#fb9a99" },
{ name: "UMA", color: "#e31a1c" },
{ name: "COMESA", color: "#fdbf6f" },
{ name: "ECOWAS", color: "#ff7f00" },
{ name: "CEN-SAD", color: "#cab2d6" },
{ name: "SADC", color: "#6a3d9a" },
{ name: "ECCAS", color: "#ffff99" },
{ name: "ICGLR", color: "#b15928" },
{ name: "RECSA", color: "#a6cee3" },
{ name: "SARCOM", color: "#1f78b4" },
];
const regional_treaties = [
{
name: "Bamako Declaration",
name2: "BamakoDeclaration",
icon_eligible: Icon26,
icon_signed: Icon24,
icon_ratified: null,
},
{
name: "Kinshasa Convention",
name2: "KinshasaConvention",
icon_eligible: Icon4,
icon_signed: Icon6,
icon_ratified: Icon5,
},
{
name: "ECOWAS Convention",
name2: "ECOWASConvention",
icon_eligible: Icon2,
icon_signed: Icon3,
icon_ratified: null,
},
{
name: "Khartoum Declaration",
name2: "KhartoumDeclaration",
icon_eligible: Icon21,
icon_signed: Icon23,
icon_ratified: null,
},
{
name: "Nairobi Protocol",
name2: "NairobiProtocol",
icon_eligible: Icon22,
icon_signed: Icon25,
icon_ratified: null,
},
{
name: "SADC Firearms Protocol",
name2: "SADCFirearmsProtocol",
icon_eligible: Icon8,
icon_signed: Icon7,
icon_ratified: Icon9,
},
];
const international_treaties = [
{
name: "Arms Trade Treaty",
name2: "ArmsTradeTreaty",
icon_eligible: Icon19,
icon_signed: Icon17,
icon_ratified: Icon18,
},
{
name: "Firearms Protocol",
name2: "FirearmsProtocol",
icon_eligible: Icon12,
icon_signed: Icon10,
icon_ratified: Icon11,
},
{
name: "Wassenaar Agreement",
name2: "WassenaarAgreement",
icon_eligible: Icon15,
icon_signed: Icon13,
icon_ratified: Icon14,
},
];
const {
africaCountries,
loading,
error,
countriesNames,
selectedCountry,
selectedCountriesFilter,
selectedCountryColor,
} = this.state;
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<Stack direction="horizontal" className="map-filter-box" gap={0}>
<div className={`filters-box`}>
<div>
<h5>African Countries</h5>
<select onChange={this.handleCountryChange} value={selectedCountry}>
<option value="">Select a country</option>
{countriesNames.map((country, index) => (
<option key={index} value={country}>
{country}
</option>
))}
</select>
<hr />
</div>
<div>
<h5>Regional Organisations</h5>
<div className="regional-organisations">
{regional_organisations.map((org, index) => (
<div
key={org.name}
className="organization-item"
style={{ backgroundColor: org.color }}
onClick={() =>
this.handleOrganizationClick(org.name, "", org.color)
}
>
<div className="name">{org.name}</div>
</div>
))}
</div>
<hr />
</div>
<div>
<h5>Regional Treaties</h5>
<div className="regional-treaties">
{regional_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
{treaty.icon_eligible && (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Eligible")
}
/>
)}
{treaty.icon_signed && (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Signed")
}
/>
)}
{treaty.icon_ratified && (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Ratified")
}
/>
)}
</div>
))}
</div>
<hr />
</div>
<div>
<h5>International Treaties</h5>
{international_treaties.map((treaty) => (
<div key={treaty.name} className="treaty-item">
<div className="treaty-item-name">{treaty.name}</div>
{treaty.icon_eligible && (
<img
src={treaty.icon_eligible}
alt={`${treaty.name}-Eligible`}
title={`${treaty.name}-Eligible`}
srcSet=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Eligible")
}
/>
)}
{treaty.icon_signed && (
<img
src={treaty.icon_signed}
alt={`${treaty.name}-Signed`}
title={`${treaty.name}-Signed`}
srcSet=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Signed")
}
/>
)}
{treaty.icon_ratified && (
<img
src={treaty.icon_ratified}
alt={`${treaty.name}-Ratified`}
title={`${treaty.name}-Ratified`}
srcSet=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick(treaty.name2, "Ratified")
}
/>
)}
</div>
))}
<hr />
</div>
<div>
<h5>
International Guidelines & Instruments <br />
<small>
(countries with recent activities only, 2014 - 2019)
</small>
</h5>
<div className="treaty-item-2">
<div className="treaty-item-name">UN Programme of Action</div>
<img
src={Icon20}
alt=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick("UNProgrammeofAction")
}
/>
</div>
<div className="treaty-item-2">
<div className="treaty-item-name">
International Tracing Instrument
</div>
<img
src={Icon16}
alt=""
className="icon-2"
onClick={() =>
this.handleOrganizationClick("InternationalTracingInstrument")
}
/>
</div>
<hr />
</div>
<div>
<h5>African Guidelines & Instrumentss</h5>
<div className="treaty-item-2">
<div className="treaty-item-name">
Silencing the Guns in Africa Programme of Action
</div>
<img
src={Icon1}
alt=""
className="icon-2"
onClick={() => this.handleOrganizationClick("StG-PoA")}
/>
</div>
</div>
</div>
<div id="map" className="map-container">
<MapContainer
center={this.state.center}
zoom={this.state.zoom}
ref={this.mapRef}
zoomControl={false}
style={{ width: "100%", height: "100%" }}
scrollWheelZoom={this.state.scrollWheelZoom}
>
{africaCountries && (
<>
<GeoJSON
ref={this.geoJsonLayerRef}
onEachFeature={this.onEachFeature}
id="africa-map"
style={(feature) =>
feature.properties.name === selectedCountry ||
selectedCountriesFilter.find(
(item) => item === feature.properties.name
)
? CountrySelectedStyle(selectedCountryColor)
: CountryStyle()
}
key="africa-map"
data={africaCountries}
/>
</>
)}
{selectedCountry &&
africaCountries.map((feature) => {
if (feature.properties.name === selectedCountry) {
return (
<Marker
key={feature.properties.name}
position={[feature.properties.y, feature.properties.x]}
>
<Tooltip
direction="bottom"
offset={[-13, 27]}
opacity={1}
permanent
className="tooltip-custom"
>
<h5>{feature.properties.name}</h5>
<div className="matrix">
{regional_organisations.map((org) => (
<div
key={org.name}
className="rectangle"
style={
feature.properties[org.name] === 1
? {
backgroundColor: findColorByName(
org.name
),
}
: {}
}
title={org.name}
></div>
))}
</div>
<div className="matrix-treaties-map">
{regional_treaties.map((org) => (
<div key={org.name2}>
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
</div>
))}
</div>
<div className="matrix-treaties-map">
{international_treaties.map((org) => (
<div key={org.name2}>
{(feature.properties[org.name2] ===
"Eligible" && (
<img
title={org.name}
src={org.icon_eligible}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] === "Signed" && (
<img
title={org.name}
src={org.icon_signed}
alt=""
srcSet=""
/>
)) ||
(feature.properties[org.name2] ===
"Ratified" && (
<img
title={org.name}
src={org.icon_ratified}
alt=""
srcSet=""
/>
))}
</div>
))}
</div>
<div className="matrix-treaties-map">
<div>
{feature.properties.UNProgrammeofAction === 1 && (
<img src={Icon20} alt="" srcSet="" />
)}
</div>
<div>
{feature.properties
.InternationalTracingInstrument === 1 && (
<img src={Icon16} alt="" srcSet="" />
)}
</div>
<div>
{feature.properties["StG-PoA"] === 1 && (
<img src={Icon1} alt="" srcSet="" />
)}
</div>
</div>
</Tooltip>
</Marker>
);
}
})}
<div className="custom-zoom-control">
<button onClick={this.zoomIn}>+</button>
<button onClick={this.zoomOut}>-</button>
<button onClick={this.resetMap}>*</button>
</div>
</MapContainer>
</div>
</Stack>
);
}
}
export default AfricaMap;

16
src/Components/Layout/AfricaMap/AfricaMap.module.css Normal file
View File

@ -0,0 +1,16 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.leaflet-container {
/* height: 100vh; */
background-color: white;
}
.map-container {
width: 100%; /* Set width to fill the available space */
height: 100vh; /* Set height to fill the viewport height */
border: solid 1px black;
}

21
src/Components/Layout/AfricaMap/Title.js Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
const Title = () => {
return (
<div className="responsive-text text-center">
<h4 className="h4">
SALW control in Africa: Organisations, treaties and instruments
</h4>
<h4 className="h4">
مراقبة الاسلحة الصغيرة و الاسلحة الخفيفة في أفريقيا: المنظمات و
المعاهدات و الأدوات
</h4>
<h4 className="h4">
Contrôle des ALPC en Afrique : Organisations, traités et instruments
</h4>
</div>
);
};
export default Title;

0
src/Components/Layout/AfricaMap/Title.nodule.css Normal file
View File

38
src/Components/Layout/AfricaMap/ZoomControl.css Normal file
View File

@ -0,0 +1,38 @@
/* Styles for custom zoom control buttons */
.custom-zoom-control {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.custom-zoom-control button {
background-color: #fff;
border: 2px solid #bbb;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
color: #333;
cursor: pointer;
display: block;
font-size: 18px;
line-height: 18px;
margin-bottom: 5px;
outline: none;
padding: 5px;
text-align: center;
text-decoration: none;
transition: background-color 0.2s ease;
width: 30px;
}
.custom-zoom-control button:hover {
background-color: #f4f4f4;
}
.custom-zoom-control button:active {
background-color: #e6e6e6;
}
.custom-zoom-control button:first-child {
margin-bottom: 0;
}

25
src/Components/Layout/AfricaMap/countryStyles.js Normal file
View File

@ -0,0 +1,25 @@
export const CountryStyle = () => {
return {
color: "black",
weight: 1,
opacity: 1,
fillColor: "#FDEDE2",
fillOpacity: 0.3,
};
};
export const CountrySelectedStyle = (color) => {
return {
fillColor: color,
color: "black",
weight: 3,
};
}
export const CountryHighlightStyle = () => {
return {
fillColor: "yellow",
color: "black",
weight: 3,
};
}

35
src/Components/Layout/AfricaMap/eventHandlers.js Normal file
View File

@ -0,0 +1,35 @@
export const onEachFeature = (feature, layer, context) => {
const countryName = feature.properties.SOVEREIGNT;
layer.bindPopup(`<h5>${countryName}</h5>`);
layer.on({
mouseover: (event) => {
event.target.bringToFront();
event.target.setStyle(context.countryHighlightStyle());
},
mouseout: (event) => {
if (
context.state.selectedCountry === null ||
context.state.selectedCountry !== countryName
) {
event.target.bringToBack();
event.target.setStyle(context.countryStyle());
}
},
click: (event) => {
const popupContent = `<h5>Clicked: ${countryName}</h5>`;
context.setState(
{
selectedCountry: countryName,
},
() => {
setTimeout(() => {
event.target.setStyle(context.countrySelectedStyle());
}, 10);
}
);
event.target.bindPopup(popupContent).openPopup();
},
});
};

13
src/Components/Layout/AfricaMap/fetchMap.js Normal file
View File

@ -0,0 +1,13 @@
import Africa from "../../../Data/Africa.geojson";
const fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
return { loading: false, error: null, africaCountries: data.features };
} catch (error) {
return { loading: false, error: error, africaCountries: null };
}
};
export default fetchAfricaCountries;

17
src/Components/Layout/AfricaMap/helpers.js Normal file
View File

@ -0,0 +1,17 @@
export const resetMap = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setView(context.state.center, context.state.zoom);
}
};
export const zoomIn = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setZoom(context.map.current.getZoom() + 1);
}
};
export const zoomOut = (context) => {
if (context.mapRef.current) {
context.mapRef.current.setZoom(context.mapRef.current.getZoom() - 1);
}
};

89
src/Components/Layout/AfricaMap/tmp.js Normal file
View File

@ -0,0 +1,89 @@
import React, { useState, useEffect } from "react";
import { MapContainer, GeoJSON, useMap, TileLayer } from "react-leaflet";
import Africa from "../../../Data/Africa.geojson";
import "./AfricaMap.css";
const countryStyle = {
color: "black",
weight: 1,
opacity: 1,
fillColor: "orange",
fillOpacity: 0.3,
};
const countryHighlightStyle = {
fillColor: "yellow",
color: "orange",
fillOpacity: 0.5,
};
const countrySelectedStyle = {
fillColor: "yellow",
color: "orange",
fillOpacity: 0.5,
};
const AfricaMap = () => {
const [africa, setAfrica] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedCountry, setSelectedCountry] = useState(null);
useEffect(() => {
const feachtAfricaData = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
setAfrica(data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
feachtAfricaData();
}, []);
const onEachCountry = (feature, layer) => {
const countryName = feature.properties.SOVEREIGNT;
const popupContent = `<h5>${countryName}</h5>`;
layer.bindPopup(popupContent);
layer.on({
click: (event) => {
// Set the state of the selected country
setSelectedCountry(event.target.feature.properties.SOVEREIGNT);
// Log the clicked country to the console
console.log(selectedCountry);
console.log(event.target);
// Set the style of the clicked country
event.target.setStyle(countrySelectedStyle);
event.target.bringToFront();
//layer.openPopup();
},
mouseover: (event) => {
//layer.openPopup();
},
});
};
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div id="map">
<MapContainer center={[3, 15]} zoom={4}>
<GeoJSON
style={countryStyle}
key="africa-map"
data={africa}
onEachFeature={onEachCountry}
></GeoJSON>
</MapContainer>
</div>
);
};
export default AfricaMap;

58
src/Components/Layout/AfricaMapFilters/AfricaMapFilters.js Normal file
View File

@ -0,0 +1,58 @@
import React, { useState, useEffect } from "react";
import Africa from "../../../Data/TestAfrica.geojson";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import Select from "react-select";
const AfricaMapFilters = ({ handleCountrySelect }) => {
const [africaCountries, setAfricaCountries] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedOption, setSelectedOption] = useState(null);
useEffect(() => {
const fetchAfricaCountries = async () => {
try {
const response = await fetch(Africa);
const data = await response.json();
setAfricaCountries(
data.features.map((country) => ({
value: country.properties.name,
label: country.properties.name,
target: country,
}))
);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
fetchAfricaCountries();
}, []);
const handleChange = (selectedOption) => {
setSelectedOption(selectedOption);
handleCountrySelect(selectedOption);
};
return (
<div>
AfricaMapFilters
<div>
<h3>Select a country:</h3>
<Select
value={selectedOption}
onChange={handleChange}
options={africaCountries}
isSearchable={true}
placeholder="Search..."
menuPortalTarget={document.body}
/>
</div>
</div>
);
};
export default AfricaMapFilters;

36
src/Components/Layout/CarouselsSalw/CarouselsSalw.js Normal file
View File

@ -0,0 +1,36 @@
import React from "react";
import Carousel from "react-bootstrap/Carousel";
import Container from "react-bootstrap/esm/Container";
import Classes from "./CarouselsSalw.module.css";
import weapon1 from "../../../img/weapon1.png";
import weapon2 from "../../../img/weapon2.png";
import weapon3 from "../../../img/weapon3.png";
import weapon4 from "../../../img/weapon4.png";
import weapon5 from "../../../img/weapon5.png";
const CarouselsSalw = () => {
return (
<Container className="mt-5">
<Carousel className={`${Classes.swiper} text-center w-75 m-auto`}>
<Carousel.Item>
<img src={weapon1} alt="" className="d-block mx-auto" />
</Carousel.Item>
<Carousel.Item>
<img src={weapon2} alt="" className="d-block mx-auto"/>
</Carousel.Item>
<Carousel.Item>
<img src={weapon3} alt="" className="d-block mx-auto"/>
</Carousel.Item>
<Carousel.Item>
<img src={weapon4} alt="" className="d-block mx-auto"/>
</Carousel.Item>
<Carousel.Item>
<img src={weapon5} alt="" className="d-block mx-auto"/>
</Carousel.Item>
</Carousel>
</Container>
);
};
export default CarouselsSalw;

6
src/Components/Layout/CarouselsSalw/CarouselsSalw.module.css Normal file
View File

@ -0,0 +1,6 @@
.swiper {
border: solid 1px #ccc;
border-radius: 15px;
background-color: #ccc;
height: 100%;
}

29
src/Components/Layout/MainDescription/MainDescription.js Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import Container from "react-bootstrap/esm/Container";
const MainDescription = () => {
return (
<Container className="mt-5">
<p>
<strong>SALW Guide</strong> The Interactive Guide on Small Arms and Light Weapons is an
online database that provides information on the global distribution of,
and how to identify commonly used* small arms and light weapons (SALW)
in organized violence. It is designed to build knowledge on how to
recognize different types, makes and models of commonly used SALW; to
collect data on the global and country-specific spread of these SALW;
and to describe some of their visual and technical specifications. The
guide is not an exhaustive list of all SALW that are used around the
world. The interactive Guide was developed by BICC in close cooperation
with the Bundeswehr Verification Center (BwVC) and with generous support
of the Federal Foreign Office, Germany. * This is based on information
provided by the German Bundeswehr Verification Center. The SALW Guide is
also a contribution to the UN Programme of Action (PoA) to Prevent,
Combat and Eradicate the Illicit Trade in Small Arms and Light Weapons
in All Its Aspects.
</p>
</Container>
);
};
export default MainDescription;

40
src/Components/Layout/NavBarSalw/NavBarSalw.js Normal file
View File

@ -0,0 +1,40 @@
import React from "react";
import { BrowserRouter as Router, Route, Link, Switch, Routes } from "react-router-dom";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import Home from "../../Pages/Home";
import About from "../../Pages/About";
import Treaties from "../../Pages/Treaties";
const NavBarSalw = () => {
return (
<>
<Router>
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">SALW Guide</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="home">Home</Nav.Link>
<Nav.Link href="treaties">Treaties</Nav.Link>
<Nav.Link href="about">About</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/treaties" element={<Treaties />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
</>
);
};
export default NavBarSalw;

47
src/Components/Layout/SwiperSalw/SwiperSalw.js Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import Container from "react-bootstrap/esm/Container";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
// Import Swiper styles
import "swiper/css";
import 'swiper/css/effect-fade';
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import classes from "./SwiperSalw.module.css";
// import required modules
import { EffectFade,Navigation, Pagination, Autoplay } from 'swiper/modules';
import weapon1 from "../../../img/weapon1.png"
import weapon2 from "../../../img/weapon2.png"
import weapon3 from "../../../img/weapon3.png"
import weapon4 from "../../../img/weapon4.png"
import weapon5 from "../../../img/weapon5.png"
const SwiperSalw = () => {
return (
<Container className="mt-5">
<Swiper
loop={true}
effect={'fade'}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
navigation={true}
modules={[Autoplay, Navigation]}
className={`${classes.swiper}`}
>
<SwiperSlide className={classes['swiper-slide']}><img src={weapon1} alt="" /></SwiperSlide>
<SwiperSlide className={classes['swiper-slide']}><img src={weapon2} alt="" /></SwiperSlide>
<SwiperSlide className={classes['swiper-slide']}><img src={weapon3} alt="" /></SwiperSlide>
<SwiperSlide className={classes['swiper-slide']}><img src={weapon4} alt="" /></SwiperSlide>
<SwiperSlide className={classes['swiper-slide']}><img src={weapon5} alt="" /></SwiperSlide>
</Swiper>
</Container>
);
};
export default SwiperSalw;

17
src/Components/Layout/SwiperSalw/SwiperSalw.module.css Normal file
View File

@ -0,0 +1,17 @@
.swiper {
width: 70%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px #ccc;
border-radius: 15px;
background-color: #ccc;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

47
src/Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import Container from "react-bootstrap/esm/Container";
import Stack from "react-bootstrap/Stack";
import Card_ from "../../UI/Card_/Card_";
import Button from "react-bootstrap/esm/Button";
import weapon1 from "../../../img/weapon1.png";
import weapon2 from "../../../img/weapon2.png";
const WeaponAmmuBut = () => {
return (
<Container className="mt-5">
<Stack direction="horizontal" gap={3} className="w-75 text-center m-auto">
<div
role="button"
className="w-100 text-center border rounded-end rounded-4 p-3"
>
<strong>Weapons</strong>
<p>
Do you know which SALW are commonly found around the world? Enter
here for an overview of some widely spread SALW including photos,
technical specifications, markings, distribution maps, and short
descriptions.
</p>
<img src={weapon1} alt="" srcset="" />
</div>
<div
role="button"
className="w-100 text-center border rounded-start rounded-4 p-3"
>
<strong>Ammunition</strong>
<p>
Do you know which SALW are commonly found around the world? Enter
here for an overview of some widely spread SALW including photos,
technical specifications, markings, distribution maps, and short
descriptions.
</p>
<img src={weapon2} alt="" srcset="" />
</div>
</Stack>
</Container>
);
};
export default WeaponAmmuBut;

12
src/Components/Pages/About.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
const About = () => {
return (
<div>
<h1>About Us</h1>
<p>This is the about page content.</p>
</div>
);
};
export default About;

12
src/Components/Pages/Home.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
const Home = () => {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the home page content.</p>
</div>
);
};
export default Home;

15
src/Components/Pages/Treaties.js Normal file
View File

@ -0,0 +1,15 @@
import React from "react";
import Container from "react-bootstrap/Container";
import AfricaMap from "../Layout/AfricaMap/AfricaMap";
import Title from "../Layout/AfricaMap/Title";
const Treaties = () => {
return (
<Container fluid className="p-5">
<Title></Title>
<AfricaMap></AfricaMap>
</Container>
);
};
export default Treaties;

11
src/Components/UI/Button_/Button_.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
import classes from './Button_.module.css'
const Button_ = props => {
return (
<button className={`${classes.card} ${props.className}`}>{props.children}</button>
)
}
export default Button_

10
src/Components/UI/Card_/Card_.js Normal file
View File

@ -0,0 +1,10 @@
import React from "react";
import classes from './Card_.module.css'
const Card_ = props => {
return (
<div className={`${classes.card} ${props.className} `}>{props.children}</div>
);
}
export default Card_;

5
src/Components/UI/Card_/Card_.module.css Normal file
View File

@ -0,0 +1,5 @@
.card{
/* background-color: antiquewhite; */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
border-radius: 10px;
}

8759
src/Data/Africa.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

16337
src/Data/TestAfrica.geojson Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/Icons/icon1.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 5</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Z"/><line class="cls-1" x1="4.65" y1="4.65" x2="8.29" y2="8.29"/><line class="cls-1" x1="15.81" y1="15.81" x2="24.71" y2="24.71"/><path d="M14.24,13.61v.55a.75.75,0,0,1-.75.71l-1.8.06a.8.8,0,0,1-.77-.76A1.07,1.07,0,0,1,11,13.6a.19.19,0,0,1,.08.13v0a.1.1,0,0,0-.05.08.08.08,0,0,0,.07.08,1.25,1.25,0,0,0,.65,1c.05,0,.08,0,.05-.09v0h.09c.11,0,.06-.17.06-.17l-.27-.82a1.32,1.32,0,0,1,.29-.7l1.57-.17a.71.71,0,0,1,.71.71Zm6.17-4-.28-.32H20l-.18.32c-2.65,0-10.87,0-13.84,0l-.15-.37H5.59l-.17.37H4.93a.23.23,0,0,0-.25.17v1.4l0,.08,0,.4,0,.05s-.14,0-.14.28a.2.2,0,0,0,.17.21,3.2,3.2,0,0,1,.62.14c.58.17.68.78.53,1.67a4.91,4.91,0,0,1-.59,1.58c.05,0,.08,0,.08.05s-.06.07-.14.07l0,.07s.08,0,.08.06-.06.06-.14.06l0,.08s.08,0,.08.06-.07.06-.14.06L5,16.21s.07,0,.07.05-.06.06-.14.06l-.05.09s.06,0,.06.05,0,.06-.13.06l-.06.11s.06,0,.06.05-.06.06-.13.06l-.05.08s0,0,0,.05,0,0-.09.05L4.47,17s0,0,0,0,0,0-.09.05l-.06.12s0,0,0,0,0,0-.08,0l-.06.12s0,0,0,0,0,0-.07.05l-.07.12,0,0s0,0-.07.05L4,17.86s0,0,0,0,0,0,0,0L4,18.05l0,0s0,0-.05,0l-.06.16a0,0,0,0,0,0,0s0,0,0,0,0,.09-.05.13l0,0s0,0,0,0,0,.1,0,.14,0,0,0,0,0,0-.05,0l0,.13s0,0,0,0,0,0,0,0a1.13,1.13,0,0,1,0,.12l0,0,0,.08,0,.14a1.06,1.06,0,0,0,.07.64,1.37,1.37,0,0,0,.64.48h.53v0a.8.8,0,0,0-.25.45c0,.23.38.23.38.23s2.1,0,2.69,0,.54-.38.54-.38l0-.38a2.44,2.44,0,0,0,.34-.21.54.54,0,0,0,.14-.38,3.87,3.87,0,0,0,0-.45A4.55,4.55,0,0,1,9,18.53a.73.73,0,0,1,.4-.42c.1-.06.08-.13.08-.13a.67.67,0,0,1,0-.73.91.91,0,0,1,.41-.51c.21-.1.15-.18.15-.18s-.23-.27.08-.95c.19-.4.41-.52.64-.54a1.61,1.61,0,0,1,.67.23,3.6,3.6,0,0,0,.8.06l2.61-.11.08-.13,0-.15a1.88,1.88,0,0,1-.16-.89,2.46,2.46,0,0,1,.1-.88c.11-.22.55-.39.55-.39s4.34-.15,4.8-.18.47-.3.47-.3.09-.48.1-.63,0-.13,0-.13l0-.06,0,0,.09,0v-.37l0,0,0-.1a3.38,3.38,0,0,0,.07-.48A1.05,1.05,0,0,0,20.9,10a.63.63,0,0,1,0-.11c0-.06-.05,0-.05-.1a.16.16,0,0,0-.15-.16Z"/><path d="M22.94,9a.77.77,0,0,0-1.14-.18l-.06,0a.73.73,0,0,0-.16.89,2.46,2.46,0,0,1,0,2.46.73.73,0,0,0,.16.89l.06,0a.74.74,0,0,0,1.14-.18,4.12,4.12,0,0,0,.52-2A4.19,4.19,0,0,0,22.94,9Z"/><path d="M24.84,7.16A.75.75,0,0,0,23.74,7l0,0a.75.75,0,0,0-.11,1A5,5,0,0,1,24.5,11a5.14,5.14,0,0,1-.91,2.9.74.74,0,0,0,.11,1l0,0a.74.74,0,0,0,1.1-.13,6.57,6.57,0,0,0,0-7.57Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/Icons/icon10.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.09 16.27"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 14</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M.5.62H7.9V3.93H3.59v2.8H7.65V10H3.59v5.76H.5Z"/><path class="cls-1" d="M9.82.83A18.27,18.27,0,0,1,13.62.5a4.88,4.88,0,0,1,3.66,1.21,5.1,5.1,0,0,1,1.31,3.64,5.81,5.81,0,0,1-1.12,3.74,4.81,4.81,0,0,1-3.84,1.59c-.3,0-.56,0-.75,0v5.14H9.82Zm3.06,6.68a3,3,0,0,0,.7.06,1.9,1.9,0,0,0,2-2.12,1.66,1.66,0,0,0-1.75-1.89,3.38,3.38,0,0,0-.91.09Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 618 B

1
src/Icons/icon11.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.45 15.27"><title>Element 15</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M0,.12H6.67V2.39H2.11V6.57H6.35V8.83H2.11v6.44H0Z"/><path d="M8.71.31A14.79,14.79,0,0,1,11.93,0a4.34,4.34,0,0,1,3.4,1.24,5,5,0,0,1,1.12,3.35,5.49,5.49,0,0,1-1,3.43,4.39,4.39,0,0,1-3.64,1.64,3.87,3.87,0,0,1-1-.11v5.72H8.71ZM10.8,7.37a3,3,0,0,0,1,.13c1.57,0,2.53-1,2.53-2.81S13.47,2.13,12,2.13a4.47,4.47,0,0,0-1.22.13Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
src/Icons/icon12.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.3 15.27"><title>Element 16</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M0,.12H5.7V1H.81V7H5.29v.9H.81v7.33H0Z"/><path d="M7.9.29A10.59,10.59,0,0,1,10.37,0a3.68,3.68,0,0,1,3,1.28,4.69,4.69,0,0,1,.89,3,5.19,5.19,0,0,1-.8,3A3.94,3.94,0,0,1,10.11,9a3.93,3.93,0,0,1-1.4-.18v6.48H7.9Zm.81,7.56a4.1,4.1,0,0,0,1.47.22c2.06,0,3.3-1.32,3.3-3.72S12.17.9,10.34.9a6.29,6.29,0,0,0-1.63.18Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 494 B

1
src/Icons/icon13.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.24 16.42"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 17</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M2.43,15.78.57.63H3.32L3.7,6.12c.12,1.66.18,3.42.32,5.26h0c.17-1.84.41-3.51.63-5.26L5.41.63H7.53l.63,5.49c.19,1.66.36,3.33.5,5.26h0c.12-1.89.24-3.51.36-5.26L9.44.63H12L10.09,15.78H7.32l-.49-3.91c-.18-1.32-.33-3-.48-5h0c-.22,1.89-.41,3.6-.63,5l-.62,3.91Z"/><path class="cls-1" d="M13.4,12.79l-.4,3H10.44L12.88.63H16.1l2.1,15.15H15.64l-.38-3Zm1.65-2.67-.29-2.88c-.08-.85-.24-2.49-.34-3.44h0c-.12,1-.29,2.63-.4,3.44l-.34,2.88Z"/><path class="cls-1" d="M17.42,12.32a3.73,3.73,0,0,0,2,.59,1.27,1.27,0,0,0,1.43-1.35c0-1-.47-1.37-1.48-2.16a5.16,5.16,0,0,1-2.18-4.25c0-2.49,1.24-4.65,3.9-4.65A3.46,3.46,0,0,1,23,1l-.37,3a2.41,2.41,0,0,0-1.51-.52,1.23,1.23,0,0,0-1.32,1.31c0,.65.24,1.07,1.54,2a5.13,5.13,0,0,1,2.12,4.32c0,2.85-1.62,4.74-4.05,4.74a4.43,4.43,0,0,1-2.33-.59Z"/><path class="cls-1" d="M22.7,12.32a3.78,3.78,0,0,0,2,.59,1.28,1.28,0,0,0,1.44-1.35c0-1-.48-1.37-1.49-2.16a5.18,5.18,0,0,1-2.17-4.25c0-2.49,1.23-4.65,3.9-4.65a3.46,3.46,0,0,1,1.9.54L27.9,4a2.38,2.38,0,0,0-1.5-.52,1.23,1.23,0,0,0-1.32,1.31c0,.65.24,1.07,1.54,2a5.13,5.13,0,0,1,2.12,4.32c0,2.85-1.62,4.74-4,4.74a4.4,4.4,0,0,1-2.33-.59Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/Icons/icon14.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.76 15.42"><title>Element 18</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.08,15.28,0,.13H1.89l.75,6.61c.2,1.81.33,3.54.48,5.39h0c.15-1.89.41-3.54.66-5.41L4.77.13h1.5l.9,6.51c.23,1.74.45,3.44.6,5.49h.05c.16-2.07.33-3.71.51-5.45L9.07.13h1.79L8.73,15.28H6.87L6,9.24c-.21-1.5-.4-3.21-.54-5h0C5.24,6,5,7.7,4.79,9.28l-.94,6Z"/><path d="M11.59,11.34,11,15.28H9.2L11.76.13h2.13l2.39,15.15H14.49l-.61-3.94Zm2.1-1.88L13.21,6c-.14-1-.3-2.39-.42-3.45h0C12.61,3.6,12.44,5,12.3,6l-.5,3.47Z"/><path d="M15.66,12.72a3.15,3.15,0,0,0,1.78.61c1.13,0,1.74-.87,1.74-2.11a3.48,3.48,0,0,0-1.51-2.76A5.69,5.69,0,0,1,15.5,4.24C15.5,1.87,16.72,0,18.88,0A2.89,2.89,0,0,1,20.6.55l-.34,2.06a2.17,2.17,0,0,0-1.43-.52A1.65,1.65,0,0,0,17.3,3.93c0,1.17.46,1.71,1.64,2.7A5.47,5.47,0,0,1,21,11c0,2.71-1.49,4.44-3.55,4.44a3.6,3.6,0,0,1-2.09-.63Z"/><path d="M20.43,12.72a3.2,3.2,0,0,0,1.78.61c1.13,0,1.74-.87,1.74-2.11a3.45,3.45,0,0,0-1.51-2.76,5.69,5.69,0,0,1-2.17-4.22C20.27,1.87,21.5,0,23.65,0a2.89,2.89,0,0,1,1.72.55L25,2.61a2.16,2.16,0,0,0-1.42-.52,1.64,1.64,0,0,0-1.53,1.84c0,1.17.46,1.71,1.63,2.7A5.44,5.44,0,0,1,25.76,11c0,2.71-1.49,4.44-3.55,4.44a3.62,3.62,0,0,1-2.09-.63Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/Icons/icon15.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.68 15.56"><title>Element 19</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.84,15.35,0,.21H.81L2.35,8.62c.36,2,.68,3.74.88,5.3h0c.17-1.58.54-3.33,1-5.33L5.92.21h.75L8.25,8.49c.34,1.84.69,3.69.88,5.43h0c.25-1.84.58-3.5.95-5.36L11.8.21h.81L9.48,15.35H8.74L7.11,6.59C6.72,4.52,6.45,3,6.3,1.51h0c-.17,1.47-.46,3-.91,5.1L3.57,15.35Z"/><path d="M12.67,10.08l-1.28,5.27h-.8L14.33.21h.76l3.74,15.14H18l-1.29-5.27Zm3.82-.88-1.2-4.82c-.26-1.09-.41-1.94-.58-2.91h-.05c-.15,1-.33,1.88-.56,2.88L12.89,9.2Z"/><path d="M18.5,13.77a3.43,3.43,0,0,0,2.21.89c1.6,0,2.59-1.27,2.59-3.14A3.81,3.81,0,0,0,21.2,8a4.59,4.59,0,0,1-2.73-4.18C18.47,1.58,19.81,0,21.63,0a3.15,3.15,0,0,1,2.05.67l-.31.88A2.76,2.76,0,0,0,21.55.89a2.42,2.42,0,0,0-2.29,2.69c0,1.74.74,2.54,2.2,3.45a4.78,4.78,0,0,1,2.63,4.4c0,2.29-1.23,4.13-3.42,4.13a3.85,3.85,0,0,1-2.47-.92Z"/><path d="M24.09,13.77a3.46,3.46,0,0,0,2.21.89c1.6,0,2.59-1.27,2.59-3.14A3.79,3.79,0,0,0,26.79,8a4.6,4.6,0,0,1-2.72-4.18C24.07,1.58,25.41,0,27.22,0a3.15,3.15,0,0,1,2.05.67L29,1.55A2.76,2.76,0,0,0,27.14.89a2.42,2.42,0,0,0-2.29,2.69c0,1.74.75,2.54,2.21,3.45a4.77,4.77,0,0,1,2.62,4.4c0,2.29-1.23,4.13-3.42,4.13a3.81,3.81,0,0,1-2.46-.92Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
src/Icons/icon16.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.05 15.15"><title>Element 20</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M3.09,0V15.15H0V0Z"/><path d="M7.45,3.41H4.52V0h9V3.41h-3V15.15H7.45Z"/><path d="M18.05,0V15.15H15V0Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 292 B

1
src/Icons/icon17.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.93 16.15"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 21</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.47,12.14l-.65,3.51H.62L4,.5H8.08l3.44,15.15H8.18l-.73-3.51ZM7,9.14,6.49,6.42c-.18-.86-.39-2.09-.57-3h0c-.17.9-.34,2.14-.51,3L4.88,9.14Z"/><path class="cls-1" d="M12.05,3.91H9.11V.5h9V3.91h-3V15.65H12.05Z"/><path class="cls-1" d="M20.34,3.91H17.41V.5h9V3.91h-3V15.65H20.34Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 559 B

1
src/Icons/icon18.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.04 15.15"><title>Element 22</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M3.16,10.87l-1,4.28H0L3.7,0H6.38l3.75,15.15H7.87l-1-4.28ZM6.48,8.78,5.57,5c-.22-.94-.42-2-.59-2.84h0C4.78,3.08,4.6,4.13,4.4,5L3.5,8.78Z"/><path d="M10.85,2.33H7.55V0h8.73V2.33H13V15.15h-2.1Z"/><path d="M18.61,2.33H15.32V0H24V2.33H20.72V15.15H18.61Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 439 B

1
src/Icons/icon19.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.73 15.15"><title>Element 23</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.26,9.85.83,15.15H0L4.17,0H5L9.11,15.15H8.27L6.82,9.85ZM6.57,9,5.17,3.89c-.28-1.05-.44-1.81-.6-2.67H4.52c-.16.88-.34,1.67-.59,2.62L2.51,9Z"/><path d="M10.11.9H6.35V0h8.33V.9H10.93V15.15h-.82Z"/><path d="M17.16.9H13.4V0h8.33V.9H18V15.15h-.81Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

1
src/Icons/icon2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
src/Icons/icon20.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.76 15.4"><title>Element 24</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.65.07V9.78c0,2,.41,2.58.89,2.58s.89-.45.89-2.58V.07H7.08V9.15C7.08,13,6,15.4,3.56,15.4.85,15.4,0,12.9,0,9.1v-9Z"/><path d="M7.23,15.22V.07H9.65l1.62,5.44c.29,1,.84,2.87,1.13,4h0c-.06-1.23-.25-4.18-.25-7V.07h2.31V15.22H12.08l-1.56-5.11C10.16,9,9.63,7,9.42,5.82h0c0,1.31.15,3.82.15,6.79v2.61Z"/><path d="M14.73.29A10.54,10.54,0,0,1,17.26,0a4,4,0,0,1,3.38,1.19,5.21,5.21,0,0,1,1.05,3.4,6.21,6.21,0,0,1-1.1,3.88,3.75,3.75,0,0,1-2.84,1.35h-.39v5.4H14.73ZM17.36,7a1.09,1.09,0,0,0,.31,0c1.06,0,1.4-1,1.4-2.14s-.38-2.11-1.23-2.11a1,1,0,0,0-.48.11Z"/><path d="M27.21,9.64c0,4.74-2.12,5.76-3.38,5.76-2.23,0-3.43-2.21-3.43-5.67C20.4,5.8,22.08,4,23.84,4,26,4,27.21,6.32,27.21,9.64ZM23,9.67c0,1.91.22,3.12.86,3.12s.72-1.55.72-3.12-.18-3.08-.76-3.08S23,8.2,23,9.67Z"/><path d="M29,12.23l-.4,3H26L28.44.07h3.22l2.1,15.15H31.2l-.38-3Zm1.66-2.68-.29-2.87c-.09-.86-.24-2.5-.35-3.44h0c-.12.94-.29,2.63-.39,3.44l-.35,2.87Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/Icons/icon21.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 25</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M25.48,9.85h-2v-2a.55.55,0,0,0-.55-.55H20.86v-2a.55.55,0,0,0-.55-.55H6.45a.55.55,0,0,0-.55.55V20.47a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h2.05v2a.56.56,0,0,0,.55.56h9.15a.55.55,0,0,0,.37-.16l4.68-4.22a.51.51,0,0,0,.18-.43v-11A.51.51,0,0,0,25.48,9.85ZM7,5.78H19.76V17.41l-2.85,2.44H7ZM9.6,21h7.47a.75.75,0,0,0,.36-.13l3.22-2.75a.57.57,0,0,0,.18-.43V8.38H22.3V19.27l-3.58,3.18H9.6Zm15.3.15-4.31,3.91H12.2V23.59h6.73a.57.57,0,0,0,.37-.16L23.25,20a.58.58,0,0,0,.18-.43V11H24.9Z"/><path d="M9.39,9h8A.54.54,0,0,0,18,8.47a.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.52.52,0,0,0,9.39,9Z"/><path d="M9.39,11.69h8a.56.56,0,0,0,0-1.11h-8a.55.55,0,0,0-.55.56A.51.51,0,0,0,9.39,11.69Z"/><path d="M17.37,13.25H15.23a.55.55,0,0,0-.55.55.55.55,0,0,0,.55.55h2.14a.55.55,0,0,0,.55-.55A.52.52,0,0,0,17.37,13.25Z"/><path d="M17.37,15.91H15.23a.55.55,0,0,0-.55.55.55.55,0,0,0,.55.55h2.14a.55.55,0,0,0,.55-.55A.52.52,0,0,0,17.37,15.91Z"/><path d="M13.3,18.42a.56.56,0,0,0,.56-.55v-4a.55.55,0,0,0-.56-.55h-4a.54.54,0,0,0-.55.55v4a.55.55,0,0,0,.55.55Zm-3.45-4h2.87v2.9H9.85Z"/><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/Icons/icon22.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 26</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M21.3,23.19a2.18,2.18,0,0,1-1.51-.64.57.57,0,1,1,.8-.8h0a1.3,1.3,0,0,0,.47.27,1,1,0,0,0,1.15-1.14,1.24,1.24,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2.12,2.12,0,0,1-1.43,3.59Z"/><path d="M18.08,24.26a2.22,2.22,0,0,1-1.52-.64.57.57,0,0,1,.8-.8h0a1.4,1.4,0,0,0,.48.28A1,1,0,0,0,19,22a1.4,1.4,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2,2,0,0,1,0,2.95A2,2,0,0,1,18.08,24.26Z"/><path d="M14.87,25.32a2.29,2.29,0,0,1-1.51-.61h0l-1.08-1.08a.57.57,0,0,1,0-.8h0a1.25,1.25,0,0,0,.28-.47.81.81,0,0,0-.28-.88.8.8,0,0,0-.87-.27,1.34,1.34,0,0,0-.48.28.57.57,0,0,1-.8,0,.58.58,0,0,1,0-.81,2,2,0,0,1,2.94,0,2,2,0,0,1,.35,2.5l.72.71a1.26,1.26,0,0,0,.5.27.83.83,0,0,0,.86-.25.81.81,0,0,0,.24-.89,1.48,1.48,0,0,0-.26-.48.57.57,0,1,1,.84-.76,2.08,2.08,0,0,1,0,2.93A2,2,0,0,1,14.87,25.32Z"/><path d="M11.55,24.26a2,2,0,0,1-1.43-.64,1.91,1.91,0,0,1-.54-2.05,2.43,2.43,0,0,1,.54-.9.57.57,0,0,1,.8.8h0a1.34,1.34,0,0,0-.28.48.81.81,0,0,0,.28.87.81.81,0,0,0,.87.28,1.53,1.53,0,0,0,.48-.28.57.57,0,0,1,.8,0,.56.56,0,0,1,0,.8A2.18,2.18,0,0,1,11.55,24.26Z"/><path d="M23.45,21a2.22,2.22,0,0,1-1.52-.64.57.57,0,1,1,.8-.8,1.35,1.35,0,0,0,.48.27.8.8,0,0,0,.87-.27.81.81,0,0,0,.28-.87,1.4,1.4,0,0,0-.28-.48L23,17.19l0,0L17.8,12H14l-.91.91C12,14,11,14.44,10,14.25a4.22,4.22,0,0,1-2-1.37.56.56,0,0,1-.17-.4.54.54,0,0,1,.17-.4L11.2,8.86c2.05-2,6.51-1.49,7.72-1.29l1.94-1.94a.58.58,0,0,1,.8,0L27,11a.57.57,0,0,1,0,.8L25,13.86l-.92,2.76.82.83a2.44,2.44,0,0,1,.54.89,1.92,1.92,0,0,1-.54,2.06A2,2,0,0,1,23.45,21Zm-9.71-10.2H18a.59.59,0,0,1,.4.16l4.72,4.73L24,13.37a.56.56,0,0,1,.13-.22l1.75-1.75L21.26,6.83,19.51,8.58a.59.59,0,0,1-.51.16c-.05,0-5.1-1-7,.92L9.17,12.48a2.42,2.42,0,0,0,1.06.66c.55.11,1.21-.24,2-1.06L13.34,11A.59.59,0,0,1,13.74,10.84Z"/><path d="M6.18,21a2,2,0,0,1-1.44-.64,2,2,0,0,1,0-2.95L6.89,15.3a2.09,2.09,0,1,1,3,2.95.57.57,0,1,1-.8-.8H9A1.4,1.4,0,0,0,9.32,17,.81.81,0,0,0,9,16.1a.8.8,0,0,0-.87-.27,1.12,1.12,0,0,0-.48.28L5.54,18.25h0a1.29,1.29,0,0,0-.27.48.8.8,0,0,0,.27.87.81.81,0,0,0,.88.27,1.54,1.54,0,0,0,.48-.27.56.56,0,0,1,.79.8A2.18,2.18,0,0,1,6.18,21Z"/><path d="M8.33,23.19a2,2,0,0,1-1.44-.64,2,2,0,0,1-.54-2.06,2.6,2.6,0,0,1,.54-.89L9,17.45a2.36,2.36,0,0,1,1.52-.64A2.12,2.12,0,0,1,12,20.4L9.84,22.55A2.32,2.32,0,0,1,8.33,23.19ZM7.69,20.4a1.29,1.29,0,0,0-.27.48.8.8,0,0,0,.27.87.9.9,0,0,0,.64.31A1.2,1.2,0,0,0,9,21.75l2.15-2.15h0a1.4,1.4,0,0,0,.28-.48.83.83,0,0,0-.28-.87.9.9,0,0,0-.63-.31,1.25,1.25,0,0,0-.72.31L7.69,20.4Z"/><path d="M17,23.79a.58.58,0,0,1-.4-.17l-2.15-2.15a.57.57,0,0,1,.8-.8l2.15,2.15a.57.57,0,0,1,0,.8A.56.56,0,0,1,17,23.79Z"/><path d="M20.19,22.71a.55.55,0,0,1-.4-.16l-3.23-3.22a.57.57,0,0,1,0-.8.55.55,0,0,1,.8,0l3.23,3.22a.56.56,0,0,1-.4,1Z"/><path d="M22.33,20.57a.6.6,0,0,1-.4-.17l-3.22-3.22a.57.57,0,0,1,.8-.8l3.22,3.22a.55.55,0,0,1,0,.8A.56.56,0,0,1,22.33,20.57Z"/><path d="M6.22,17.34A.57.57,0,0,1,5.68,17l-1-3.1L2.59,11.8a.58.58,0,0,1-.16-.4A.56.56,0,0,1,2.6,11L8,5.63a.57.57,0,0,1,.8,0l1.94,1.94a16.83,16.83,0,0,1,4.15-.16.57.57,0,0,1,.5.63.56.56,0,0,1-.62.5,15.08,15.08,0,0,0-4.11.2.61.61,0,0,1-.51-.16L8.37,6.83,3.79,11.4l1.75,1.75a.59.59,0,0,1,.14.22L6.75,16.6a.56.56,0,0,1-.53.74Z"/><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

1
src/Icons/icon23.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 27</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M24.76,9.59h-2v-2A.55.55,0,0,0,22.19,7H20.14V5a.55.55,0,0,0-.55-.55H5.73A.55.55,0,0,0,5.18,5V20.21a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h9.15a.49.49,0,0,0,.37-.16l4.68-4.22a.5.5,0,0,0,.18-.42v-11A.51.51,0,0,0,24.76,9.59ZM6.32,5.52H19V17.15L16.2,19.6H6.32ZM8.89,20.73h7.46a.81.81,0,0,0,.37-.12l3.21-2.76a.55.55,0,0,0,.18-.43V8.12h1.47V19L18,22.2H8.89Zm15.29.15L19.87,24.8H11.49V23.33h6.73a.55.55,0,0,0,.36-.15l4-3.49a.57.57,0,0,0,.18-.43V10.69h1.47Z"/><path d="M8.67,8.77h8a.55.55,0,0,0,.55-.55.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.53.53,0,0,0,8.67,8.77Z"/><path d="M8.67,11.43h8a.55.55,0,0,0,.55-.55.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.51.51,0,0,0,8.67,11.43Z"/><path d="M16.66,13H14.51a.55.55,0,0,0,0,1.1h2.15a.55.55,0,0,0,.55-.55A.53.53,0,0,0,16.66,13Z"/><path d="M16.66,15.65H14.51a.55.55,0,0,0,0,1.1h2.15a.55.55,0,0,0,.55-.55A.53.53,0,0,0,16.66,15.65Z"/><path d="M12.59,18.16a.55.55,0,0,0,.55-.55v-4a.55.55,0,0,0-.55-.55h-4a.54.54,0,0,0-.55.55v4a.55.55,0,0,0,.55.55Zm-3.46-4H12V17H9.13Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/Icons/icon24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/Icons/icon24.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 28</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M6.33,3.29A2.09,2.09,0,0,0,4.25,5.37v1a.38.38,0,0,0,.38.37H18.24a.37.37,0,0,0,.37-.37v-1a1.33,1.33,0,0,1,2.65,0V21.24a2.08,2.08,0,0,0,4.16,0,.38.38,0,0,0-.38-.38H22.77a.38.38,0,1,0,0,.76H24.6A1.32,1.32,0,0,1,22,21.24V5.37a2.09,2.09,0,0,0-2.08-2.08Zm0,.76h12a2,2,0,0,0-.48,1.32v.56H5V5.37A1.31,1.31,0,0,1,6.33,4.05Z"/><path d="M6.94,6.32V21.24A2.08,2.08,0,0,0,9,23.32h2.41v-.75H9A1.32,1.32,0,0,1,7.7,21.24V6.32Z"/><path d="M16.16,8.59a.37.37,0,0,0-.38.37.38.38,0,0,0,.37.38H19A.37.37,0,0,0,19.37,9,.37.37,0,0,0,19,8.59H16.16Z"/><path d="M9.93,8.59A.37.37,0,0,0,9.55,9a.38.38,0,0,0,.37.38h1.14A.37.37,0,0,0,11.44,9a.38.38,0,0,0-.37-.38H9.93Z"/><path d="M12.39,8.59a.38.38,0,1,0,0,.75h2.45a.38.38,0,1,0,0-.75H12.39Z"/><path d="M13.9,11.61a.39.39,0,0,0-.39.37.4.4,0,0,0,.38.39H19a.38.38,0,0,0,.38-.38.37.37,0,0,0-.37-.38H13.9Z"/><path d="M9.93,11.61a.37.37,0,0,0-.38.37.38.38,0,0,0,.37.39h2.64A.4.4,0,0,0,13,12a.38.38,0,0,0-.38-.38H9.93Z"/><path d="M14.46,14.6a3.59,3.59,0,1,0,3.59,3.59A3.6,3.6,0,0,0,14.46,14.6Zm0,.76a2.84,2.84,0,1,1-2.84,2.83A2.82,2.82,0,0,1,14.46,15.36Z"/><path d="M12.23,20.68v4.91a.38.38,0,0,0,.38.38.35.35,0,0,0,.19-.06l1.7-1,1.69,1a.38.38,0,0,0,.52-.13.32.32,0,0,0,.05-.19V20.68H16v4.24l-1.32-.79a.39.39,0,0,0-.39,0L13,24.92V20.68Z"/><path d="M17.48,22.57v.76h5.86v-.76Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/Icons/icon25.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 29</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M21.23,23.05a2.24,2.24,0,0,1-1.51-.64.57.57,0,1,1,.8-.8h0a1.29,1.29,0,0,0,.48.27,1,1,0,0,0,1.14-1.14,1.28,1.28,0,0,0-.28-.49.55.55,0,0,1,0-.79.57.57,0,0,1,.8,0,2.12,2.12,0,0,1-1.44,3.59Z"/><path d="M18,24.12a2.18,2.18,0,0,1-1.51-.64.55.55,0,0,1,0-.8.57.57,0,0,1,.8,0h0a1.42,1.42,0,0,0,.47.28.81.81,0,0,0,.87-.28.79.79,0,0,0,.28-.87,1.24,1.24,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2,2,0,0,1,0,2.95A2,2,0,0,1,18,24.12Z"/><path d="M14.81,25.17a2.33,2.33,0,0,1-1.52-.6h0L12.2,23.48a.57.57,0,0,1,0-.8h0a1.29,1.29,0,0,0,.27-.48.8.8,0,0,0-.27-.87.8.8,0,0,0-.87-.27,1.12,1.12,0,0,0-.48.28.56.56,0,0,1-.8,0,.57.57,0,0,1,0-.8,2,2,0,0,1,2.95,0,2,2,0,0,1,.34,2.5l.72.71a1.4,1.4,0,0,0,.5.27.82.82,0,0,0,.86-.25.84.84,0,0,0,.25-.89,1.29,1.29,0,0,0-.27-.48.57.57,0,1,1,.84-.76,2.08,2.08,0,0,1,0,2.93A1.94,1.94,0,0,1,14.81,25.17Z"/><path d="M11.49,24.12a2,2,0,0,1-1.44-.64,1.92,1.92,0,0,1-.54-2.05,2.43,2.43,0,0,1,.54-.9.57.57,0,0,1,.8.8h0a1.4,1.4,0,0,0-.28.48.81.81,0,0,0,.28.87.81.81,0,0,0,.87.28,1.4,1.4,0,0,0,.48-.28.57.57,0,1,1,.8.8A2.22,2.22,0,0,1,11.49,24.12Z"/><path d="M23.38,20.9a2.18,2.18,0,0,1-1.51-.64.57.57,0,0,1,0-.8.56.56,0,0,1,.79,0,1.35,1.35,0,0,0,.48.27.81.81,0,0,0,.88-.27.8.8,0,0,0,.27-.87,1.24,1.24,0,0,0-.28-.48L23,17h0l-5.19-5.2H13.91l-.91.91c-1.11,1.11-2.11,1.55-3.06,1.37a4.22,4.22,0,0,1-2-1.37.56.56,0,0,1-.17-.4.54.54,0,0,1,.17-.4s1.1-1.1,3.23-3.22,6.51-1.49,7.72-1.29l1.94-1.94a.55.55,0,0,1,.4-.16.54.54,0,0,1,.4.16L27,10.86a.57.57,0,0,1,0,.8l-2.06,2.06L24,16.48l.83.83a2.78,2.78,0,0,1,.54.89,2,2,0,0,1-.54,2.06A2,2,0,0,1,23.38,20.9ZM13.67,10.7H18a.59.59,0,0,1,.4.16l4.72,4.73.79-2.36A.52.52,0,0,1,24,13l1.75-1.75L21.19,6.69,19.44,8.44a.56.56,0,0,1-.51.15c-.05,0-5.09-1-7,.93L9.11,12.33a2.28,2.28,0,0,0,1.05.67c.55.11,1.22-.24,2-1.06l1.07-1.08A.59.59,0,0,1,13.67,10.7Z"/><path d="M6.11,20.9a2,2,0,0,1-1.43-.64,2,2,0,0,1,0-3l2.15-2.15a2,2,0,0,1,2.94,0,2,2,0,0,1,0,2.95.57.57,0,1,1-.8-.8H9a1.24,1.24,0,0,0,.28-.48A.81.81,0,0,0,9,16a.8.8,0,0,0-.87-.27,1.4,1.4,0,0,0-.48.27L5.48,18.11h0a1.24,1.24,0,0,0-.28.48.81.81,0,0,0,.28.87.8.8,0,0,0,.87.27,1.29,1.29,0,0,0,.48-.27.56.56,0,0,1,.8,0,.57.57,0,0,1,0,.8A2.22,2.22,0,0,1,6.11,20.9Z"/><path d="M8.26,23.05a2,2,0,0,1-1.43-.64,1.93,1.93,0,0,1-.54-2.06,2.44,2.44,0,0,1,.54-.89L9,17.31a2.31,2.31,0,0,1,1.52-.64,2.12,2.12,0,0,1,1.43,3.59L9.77,22.41A2.29,2.29,0,0,1,8.26,23.05Zm-.63-2.79a1.24,1.24,0,0,0-.28.48.79.79,0,0,0,.28.87.88.88,0,0,0,.63.31A1.2,1.2,0,0,0,9,21.61l2.15-2.15h0A1.4,1.4,0,0,0,11.4,19a.81.81,0,0,0-.28-.87.88.88,0,0,0-.63-.31,1.29,1.29,0,0,0-.72.31L7.63,20.26Z"/><path d="M16.9,23.65a.56.56,0,0,1-.4-.17l-2.15-2.15a.57.57,0,0,1,.8-.8l2.15,2.15a.57.57,0,0,1,0,.8A.6.6,0,0,1,16.9,23.65Z"/><path d="M20.12,22.57a.55.55,0,0,1-.4-.16L16.5,19.18a.55.55,0,0,1,0-.8.57.57,0,0,1,.8,0l3.22,3.23a.56.56,0,0,1-.4,1Z"/><path d="M22.27,20.42a.55.55,0,0,1-.4-.16L18.64,17a.57.57,0,0,1,.8-.8l3.23,3.22a.56.56,0,0,1-.4,1Z"/><path d="M6.15,17.2a.57.57,0,0,1-.54-.39l-1-3.09L2.53,11.66a.54.54,0,0,1-.17-.4.56.56,0,0,1,.17-.4L7.91,5.49a.57.57,0,0,1,.8,0l1.94,1.94a16.74,16.74,0,0,1,4.14-.16.56.56,0,0,1,.5.62.57.57,0,0,1-.62.51,15.68,15.68,0,0,0-4.1.19.58.58,0,0,1-.52-.15L8.3,6.69,3.73,11.26,5.48,13a.5.5,0,0,1,.13.22l1.08,3.23a.56.56,0,0,1-.36.71A.57.57,0,0,1,6.15,17.2Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

1
src/Icons/icon26.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 30</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/><path d="M6.7,4.12A2.08,2.08,0,0,0,4.62,6.2v.94A.38.38,0,0,0,5,7.52H18.6A.38.38,0,0,0,19,7.14V6.2a1.33,1.33,0,1,1,2.65,0V22.07a2.08,2.08,0,1,0,4.16,0,.39.39,0,0,0-.38-.38H23.14a.38.38,0,1,0,0,.76H25a1.32,1.32,0,0,1-2.59-.38V6.2a2.08,2.08,0,0,0-2.07-2.08Zm0,.75h12a2,2,0,0,0-.48,1.32v.57H5.38V6.19A1.32,1.32,0,0,1,6.7,4.87Z"/><path d="M7.31,7.14V22.07a2.09,2.09,0,0,0,2.08,2.08H11.8v-.76H9.39a1.31,1.31,0,0,1-1.32-1.32V7.14Z"/><path d="M16.53,9.41a.38.38,0,0,0,0,.76h2.83a.38.38,0,1,0,0-.76H16.53Z"/><path d="M10.3,9.41a.38.38,0,0,0,0,.76h1.13a.38.38,0,1,0,0-.76H10.3Z"/><path d="M12.75,9.41a.38.38,0,0,0,0,.76H15.2a.38.38,0,0,0,.38-.37.39.39,0,0,0-.37-.39H12.75Z"/><path d="M14.26,12.44a.37.37,0,0,0-.38.37.38.38,0,0,0,.38.38h5.09a.39.39,0,0,0,.39-.37.38.38,0,0,0-.38-.38h-5.1Z"/><path d="M10.3,12.44a.38.38,0,1,0,0,.75h2.64a.37.37,0,0,0,.38-.37.37.37,0,0,0-.37-.38H10.3Z"/><path d="M14.83,15.43A3.59,3.59,0,1,0,18.42,19,3.59,3.59,0,0,0,14.83,15.43Zm0,.76A2.83,2.83,0,1,1,12,19,2.82,2.82,0,0,1,14.83,16.19Z"/><path d="M12.59,21.5v4.91a.38.38,0,0,0,.38.38.46.46,0,0,0,.2-.05l1.69-1,1.7,1a.38.38,0,0,0,.52-.13.46.46,0,0,0,.05-.2V21.5h-.76v4.25L15.06,25a.35.35,0,0,0-.39,0l-1.32.79V21.5Z"/><path d="M17.85,23.4v.75h5.86V23.4Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/Icons/icon3.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

1
src/Icons/icon4.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/Icons/icon5.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

1
src/Icons/icon6.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

1
src/Icons/icon7.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 11</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.15,4.15A14.18,14.18,0,0,1,24.21,24.21,14.18,14.18,0,0,1,4.15,4.15Z"/><path d="M17.31,13.65v.7a1,1,0,0,1-1,.92L14,15.34a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22L14,13.85a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L24.9,8.1h-.15l-.22.41H6.69L6.5,8H6.16L6,8.51H5.32A.32.32,0,0,0,5,8.74v1.8l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09l-.07.09c.06,0,.1.05.1.08s-.08.08-.18.08L5.37,17s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5,17.54s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0-.05,0l-.06.18s0,0,0,0,0,0,0,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.2v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19A2.49,2.49,0,0,1,18,14.25a3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12A3.55,3.55,0,0,0,26,9.61,1.26,1.26,0,0,0,25.89,9a.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><line class="cls-2" x1="4.3" y1="4.01" x2="7.64" y2="7.35"/><line class="cls-2" x1="17.18" y1="16.88" x2="24.35" y2="24.06"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/Icons/icon8.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1,.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-2{stroke-width:0.75px;}</style></defs><title>Element 12</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Z"/><path class="cls-2" d="M17.81,14.15v.7a1,1,0,0,1-1,.92l-2.32.07a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22l-.36-1.05a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L25.4,8.6h-.15L25,9H7.19L7,8.53H6.66L6.45,9H5.82a.32.32,0,0,0-.33.23V11l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09L6,17.22c.06,0,.1.05.1.08s-.08.08-.18.08l-.07.11s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5.54,18s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0,0,0l-.06.18s0,0,0,0,0,0-.05,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.7v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19a2.49,2.49,0,0,1-.19-1.15,3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12a3.55,3.55,0,0,0,.09-.62,1.26,1.26,0,0,0-.14-.63.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Zm0,0L7.22,7.22M18.14,18.14l6.57,6.57"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/Icons/icon9.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>Element 13</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M4.15,4.15A14.18,14.18,0,0,1,24.21,24.21,14.18,14.18,0,0,1,4.15,4.15Z"/><path class="cls-1" d="M17.31,13.65v.7a1,1,0,0,1-1,.92L14,15.34a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22L14,13.85a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L24.9,8.1h-.15l-.22.41H6.69L6.5,8H6.16L6,8.51H5.32A.32.32,0,0,0,5,8.74v1.8l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09l-.07.09c.06,0,.1.05.1.08s-.08.08-.18.08L5.37,17s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5,17.54s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0-.05,0l-.06.18s0,0,0,0,0,0,0,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.2v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19A2.49,2.49,0,0,1,18,14.25a3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12A3.55,3.55,0,0,0,26,9.61,1.26,1.26,0,0,0,25.89,9a.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><line class="cls-2" x1="16.79" y1="16.79" x2="24.21" y2="24.21"/><line class="cls-2" x1="4.15" y1="4.15" x2="7.44" y2="7.44"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

6
src/Styles/Base/_base.scss Normal file
View File

@ -0,0 +1,6 @@
// _base.scss
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

0
src/Styles/Base/_sreset.scss Normal file
View File

0
src/Styles/Components/_buttons.scss Normal file
View File

0
src/Styles/Components/_cards.scss Normal file
View File

0
src/Styles/Components/_forms.scss Normal file
View File

38
src/Styles/Components/_zoom_control.scss Normal file
View File

@ -0,0 +1,38 @@
/* Styles for custom zoom control buttons */
.custom-zoom-control {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.custom-zoom-control button {
background-color: #fff;
border: 2px solid #bbb;
border-radius: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
color: #333;
cursor: pointer;
display: block;
font-size: 18px;
line-height: 18px;
margin-bottom: 5px;
outline: none;
padding: 5px;
text-align: center;
text-decoration: none;
transition: background-color 0.2s ease;
width: 30px;
}
.custom-zoom-control button:hover {
background-color: #f4f4f4;
}
.custom-zoom-control button:active {
background-color: #e6e6e6;
}
.custom-zoom-control button:first-child {
margin-bottom: 0;
}

57
src/Styles/Layout/_filters.scss Normal file
View File

@ -0,0 +1,57 @@
.filters-box {
padding: $gap;
}
// _organizations
.regional-organisations {
display: grid;
grid-template-columns: repeat(3, $organization-item-width);
grid-template-rows: repeat(2, $organization-item-height);
gap: $gap;
}
.organization-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 5px;
}
.organization-item:hover {
opacity: $opacity-hover;
}
.name {
font-size: $font-size-small;
}
// _treaties
.treaty-item {
display: grid;
grid-template-columns: repeat(4, 25%);
margin-bottom: 15px;
}
.treaty-item-name {
font-size: $font-size-small;
}
.icon {
width: $icon-size-large;
height: $icon-size-large;
cursor: pointer;
}
.icon-2 {
width: $icon-size-small;
height: $icon-size-small;
cursor: pointer;
}
.treaty-item-2 {
display: grid;
grid-template-columns: repeat(2, 75%);
margin-bottom: 15px;
}

0
src/Styles/Layout/_footer.scss Normal file
View File

0
src/Styles/Layout/_grid.scss Normal file
View File

0
src/Styles/Layout/_header.scss Normal file
View File

13
src/Styles/Layout/_map.scss Normal file
View File

@ -0,0 +1,13 @@
.map-filter-box {
border: 1px solid $border-color;
}
.leaflet-container {
background-color: $background-color;
}
.map-container {
width: 100%;
height: 100vh;
}

28
src/Styles/Layout/_tooltips.scss Normal file
View File

@ -0,0 +1,28 @@
.tooltip-custom {
position: absolute;
z-index: 1000;
pointer-events: auto;
}
.matrix {
display: grid;
grid-template-columns: repeat(4, $grid-item-size);
grid-template-rows: repeat(3, $grid-item-size);
gap: $gap;
}
.matrix-treaties-map {
display: grid;
grid-template-columns: repeat(3, $grid-item-size);
grid-template-rows: repeat(2, $grid-item-size);
gap: $gap;
}
.rectangle {
background-color: $background-color;
border: 1px solid $text-color;
display: flex;
justify-content: center;
align-items: center;
font-size: $font-size-small;
}

0
src/Styles/Pages/_about.scss Normal file
View File

0
src/Styles/Pages/_home.scss Normal file
View File

0
src/Styles/Pages/_treaties.scss Normal file
View File

0
src/Styles/Utilities/_mixins.scss Normal file
View File

22
src/Styles/Utilities/_variables.scss Normal file
View File

@ -0,0 +1,22 @@
/* styles.scss */
$primary-color: #17252a; /* Use this color as the primary background color for your website */
$primary-text-color : #def2f1; /* text content, such as headings and body text */
$primary-accent-color: #2b7a78; /* buttons, links, and other interactive elements */
$secondary-accent-color: #3aafa9; /* buttons, links, and other interactive elements */
$secondary-background-color: #feffff; /* sections or elements, such as cards, modals, or sections with additional information */
$border: 1px solid #acabab;
$border-color: #acabab;
$background-color: #ffffff;
$text-color: #000;
$grid-item-size: 20px;
$gap: 3px;
$organization-item-width: 30%;
$organization-item-height: 25%;
$font-size-small: 12px;
$icon-size-large: 50px;
$icon-size-small: 35px;
$opacity-hover: 0.8;

0
src/Styles/Vendor/_bootstrap.scss vendored Normal file
View File

28
src/Styles/main.scss Normal file
View File

@ -0,0 +1,28 @@
// main.scss
// Base
@import 'Base/base';
// Import other base partials...
// Utilities
@import 'Utilities/variables';
// Import other utilities partials...
// Layout
@import 'Layout/filters';
@import 'Layout/map';
@import 'Layout/tooltips';
// Import other layout partials...
// Components
@import 'Components/zoom_control';
// Import other components partials...
// Import other partials as needed...
// Vendor
// Import other vendor partials...
// Pages

0
src/Styles/other.scss Normal file
View File

BIN
src/img/weapon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/img/weapon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/img/weapon3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/img/weapon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/img/weapon5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

2
src/index.js
View File

@ -1,3 +1,5 @@
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';

8
src/tmp/colors.css Normal file
View File

@ -0,0 +1,8 @@
.colors{
color: #17252a;
color: #2b7a78;
color: #3aafa9;
color: #def2f1;
color: #feffff;
}