Harita projesi baslatildi
This commit is contained in:
gitmuhammedalbayrak
38
.gitea/workflows/deploy.yaml
Normal file
38
.gitea/workflows/deploy.yaml
Normal file
@@ -0,0 +1,38 @@
|
||||
name: Harita Build ve Deploy
|
||||
run-name: ${{ gitea.actor }} haritayi guncelliyor 🚀
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest # Senin kurduğun Act Runner burada devreye girecek
|
||||
steps:
|
||||
- name: Kodu Çek (Checkout)
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Docker Login (Gitea Registry)
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
registry: git.konstantiniyye.studio
|
||||
username: ${{ gitea.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }} # Gitea bunu otomatik sağlar
|
||||
|
||||
- name: Docker Build ve Push
|
||||
uses: docker/build-push-action@v4
|
||||
with:
|
||||
context: .
|
||||
push: true
|
||||
tags: git.konstantiniyye.studio/${{ gitea.actor }}/dogu-haritasi:latest
|
||||
|
||||
- name: Kubernetes'e Deploy Et (Rancher)
|
||||
uses: actions-hub/kubectl@master
|
||||
env:
|
||||
KUBE_CONFIG: ${{ secrets.KUBE_CONFIG }}
|
||||
with:
|
||||
args: apply -f deployment.yaml
|
||||
|
||||
- name: Deployment'ı Yenile (Restart Pod)
|
||||
uses: actions-hub/kubectl@master
|
||||
env:
|
||||
KUBE_CONFIG: ${{ secrets.KUBE_CONFIG }}
|
||||
with:
|
||||
args: rollout restart deployment/dogu-haritasi
|
||||
8
Dockerfile
Normal file
8
Dockerfile
Normal file
@@ -0,0 +1,8 @@
|
||||
# Hafif bir web sunucusu olan Nginx kullanıyoruz
|
||||
FROM nginx:alpine
|
||||
|
||||
# Senin HTML dosyanı sunucunun içine kopyalıyoruz
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
|
||||
# 80 portunu dışarı açıyoruz
|
||||
EXPOSE 80
|
||||
0
deployment.yaml
Normal file
0
deployment.yaml
Normal file
315
index.html
Normal file
315
index.html
Normal file
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Doğu Yönelimli Dünya Haritası</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#map-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
padding: 30px;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
margin: 0 0 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.country {
|
||||
fill: #e8f4f8;
|
||||
stroke: #34495e;
|
||||
stroke-width: 0.5;
|
||||
transition: fill 0.3s;
|
||||
}
|
||||
|
||||
.country:hover {
|
||||
fill: #b3d9e6;
|
||||
}
|
||||
|
||||
.ocean {
|
||||
fill: #a8d5e2;
|
||||
}
|
||||
|
||||
.graticule {
|
||||
fill: none;
|
||||
stroke: #ddd;
|
||||
stroke-width: 0.5;
|
||||
stroke-opacity: 0.5;
|
||||
}
|
||||
|
||||
.city {
|
||||
fill: #e74c3c;
|
||||
}
|
||||
|
||||
.city-label {
|
||||
font-size: 9px;
|
||||
fill: #2c3e50;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ocean-label {
|
||||
font-size: 16px;
|
||||
fill: #2980b9;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.compass {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
fill: #34495e;
|
||||
}
|
||||
|
||||
.continent-label {
|
||||
font-size: 14px;
|
||||
fill: #34495e;
|
||||
font-weight: 700;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-container">
|
||||
<h1>Dünya Haritası - Doğu Yönelimli</h1>
|
||||
<p class="subtitle">Doğu Üstte | Eğitim ve Profesyonel Kullanım</p>
|
||||
<svg id="map"></svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const width = 1000;
|
||||
const height = 900;
|
||||
|
||||
const svg = d3.select("#map")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
// Standard projection - we'll rotate the entire SVG group
|
||||
const projection = d3.geoNaturalEarth1()
|
||||
.scale(200)
|
||||
.center([0, 0])
|
||||
.clipExtent([[0, 0], [width, height]])
|
||||
.translate([width / 2, height / 2]);
|
||||
|
||||
const path = d3.geoPath().projection(projection);
|
||||
|
||||
// Create graticule
|
||||
const graticule = d3.geoGraticule();
|
||||
|
||||
// Ocean background
|
||||
svg.append("rect")
|
||||
.attr("class", "ocean")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
// Create a group that will be rotated (rotate -90 for East at top)
|
||||
const mapGroup = svg.append("g")
|
||||
.attr("transform", `rotate(-90, ${width/2}, ${height/2})`);
|
||||
|
||||
// Add graticule
|
||||
mapGroup.append("path")
|
||||
.datum(graticule)
|
||||
.attr("class", "graticule")
|
||||
.attr("d", path);
|
||||
|
||||
// Major cities with coordinates [longitude, latitude]
|
||||
const cities = [
|
||||
{name: "Tokyo", coords: [139.69, 35.69]},
|
||||
{name: "Delhi", coords: [77.10, 28.70]},
|
||||
{name: "Şangay", coords: [121.47, 31.23]},
|
||||
{name: "São Paulo", coords: [-46.63, -23.55]},
|
||||
{name: "Mexico City", coords: [-99.13, 19.43]},
|
||||
{name: "Kahire", coords: [31.24, 30.04]},
|
||||
{name: "Mumbai", coords: [72.88, 19.08]},
|
||||
{name: "Pekin", coords: [116.41, 39.90]},
|
||||
{name: "New York", coords: [-74.01, 40.71]},
|
||||
{name: "Londra", coords: [-0.13, 51.51]},
|
||||
{name: "Paris", coords: [2.35, 48.86]},
|
||||
{name: "Moskova", coords: [37.62, 55.76]},
|
||||
{name: "Sidney", coords: [151.21, -33.87]},
|
||||
{name: "Los Angeles", coords: [-118.24, 34.05]},
|
||||
{name: "Singapur", coords: [103.82, 1.35]},
|
||||
{name: "İstanbul", coords: [28.98, 41.01]},
|
||||
{name: "Buenos Aires", coords: [-58.38, -34.60]},
|
||||
{name: "Lagos", coords: [3.38, 6.52]},
|
||||
{name: "Bangkok", coords: [100.50, 13.76]},
|
||||
{name: "Cape Town", coords: [18.42, -33.92]}
|
||||
];
|
||||
|
||||
// Ocean labels
|
||||
const oceans = [
|
||||
{name: "PASİFİK OKYANUSU", coords: [180, 0]},
|
||||
{name: "PASİFİK OKYANUSU", coords: [-160, 0]},
|
||||
{name: "ATLANTİK OKYANUSU", coords: [-30, 15]},
|
||||
{name: "HİNT OKYANUSU", coords: [80, -15]},
|
||||
{name: "ARKTİK OKYANUSU", coords: [0, 80]}
|
||||
];
|
||||
|
||||
// Continent labels
|
||||
const continents = [
|
||||
{name: "ASYA", coords: [95, 35]},
|
||||
{name: "AFRİKA", coords: [20, 5]},
|
||||
{name: "AVRUPA", coords: [25, 50]},
|
||||
{name: "KUZEY AMERİKA", coords: [-100, 45]},
|
||||
{name: "GÜNEY AMERİKA", coords: [-60, -15]},
|
||||
{name: "AVUSTRALYA", coords: [135, -25]},
|
||||
{name: "ANTARKTİKA", coords: [25, -80]}
|
||||
];
|
||||
|
||||
// Load and display world map
|
||||
d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json")
|
||||
.then(world => {
|
||||
const countries = topojson.feature(world, world.objects.countries);
|
||||
|
||||
// Draw countries
|
||||
mapGroup.append("g")
|
||||
.selectAll("path")
|
||||
.data(countries.features)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("class", "country")
|
||||
.attr("d", path)
|
||||
.append("title")
|
||||
.text(d => d.properties.name);
|
||||
|
||||
// Add continent labels
|
||||
const continentGroup = mapGroup.append("g");
|
||||
continents.forEach(continent => {
|
||||
const coords = projection(continent.coords);
|
||||
if (coords) {
|
||||
continentGroup.append("text")
|
||||
.attr("class", "continent-label")
|
||||
.attr("x", coords[0])
|
||||
.attr("y", coords[1])
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", `rotate(90, ${coords[0]}, ${coords[1]})`)
|
||||
.text(continent.name);
|
||||
}
|
||||
});
|
||||
|
||||
// Add ocean labels
|
||||
const oceanGroup = mapGroup.append("g");
|
||||
oceans.forEach(ocean => {
|
||||
const coords = projection(ocean.coords);
|
||||
if (coords) {
|
||||
oceanGroup.append("text")
|
||||
.attr("class", "ocean-label")
|
||||
.attr("x", coords[0])
|
||||
.attr("y", coords[1])
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", `rotate(90, ${coords[0]}, ${coords[1]})`)
|
||||
.text(ocean.name);
|
||||
}
|
||||
});
|
||||
|
||||
// Add cities
|
||||
const cityGroup = mapGroup.append("g");
|
||||
|
||||
cities.forEach(city => {
|
||||
const coords = projection(city.coords);
|
||||
if (coords) {
|
||||
cityGroup.append("circle")
|
||||
.attr("class", "city")
|
||||
.attr("cx", coords[0])
|
||||
.attr("cy", coords[1])
|
||||
.attr("r", 2.5);
|
||||
|
||||
cityGroup.append("text")
|
||||
.attr("class", "city-label")
|
||||
.attr("x", coords[0])
|
||||
.attr("y", coords[1])
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", `rotate(90, ${coords[0]}, ${coords[1]})`)
|
||||
.text(city.name);
|
||||
}
|
||||
});
|
||||
|
||||
// Add compass rose (not rotated, stays in normal orientation)
|
||||
const compassGroup = svg.append("g")
|
||||
.attr("transform", `translate(${width - 70}, 60)`);
|
||||
|
||||
compassGroup.append("circle")
|
||||
.attr("r", 35)
|
||||
.attr("fill", "white")
|
||||
.attr("stroke", "#34495e")
|
||||
.attr("stroke-width", 2);
|
||||
|
||||
// East at top
|
||||
compassGroup.append("text")
|
||||
.attr("class", "compass")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", -40)
|
||||
.attr("fill", "#e74c3c")
|
||||
.text("D");
|
||||
|
||||
// West at bottom
|
||||
compassGroup.append("text")
|
||||
.attr("class", "compass")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", 45)
|
||||
.text("B");
|
||||
|
||||
// North at left
|
||||
compassGroup.append("text")
|
||||
.attr("class", "compass")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("x", -40)
|
||||
.attr("y", 5)
|
||||
.text("K");
|
||||
|
||||
// South at right
|
||||
compassGroup.append("text")
|
||||
.attr("class", "compass")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("x", 40)
|
||||
.attr("y", 5)
|
||||
.text("G");
|
||||
|
||||
// Compass arrow
|
||||
compassGroup.append("path")
|
||||
.attr("d", "M 0,-25 L -4,-15 L 4,-15 Z")
|
||||
.attr("fill", "#e74c3c");
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Harita yüklenirken hata:", error);
|
||||
svg.append("text")
|
||||
.attr("x", width / 2)
|
||||
.attr("y", height / 2)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("fill", "#e74c3c")
|
||||
.text("Harita yüklenirken hata oluştu. Lütfen sayfayı yenileyin.");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user