FURK4NGG
131 lines
5.2 KiB
HTML
131 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>Furkan Karlıoğlu - 404 Page</title>
|
||
<link href="img/icon.ico" rel="shortcut icon" type="image/x-icon">
|
||
<link rel="manifest" href="/manifest.json">
|
||
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
|
||
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="robots" content="INDEX, FOLLOW">
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
<meta name="publisher" content="https://furk4ngg.github.io">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||
<meta name="theme-color" content="#282c34">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-title" content="Furkan Karlıoğlu">
|
||
<meta name="keywords" content="Furkan Karlioglu,Software,Program Languages,Artificial Intelligence,Cybersecurity,Mobile App,Mobile App Development,Robotics Coding,Portfolio,Experience,Enterprising,Software Developer">
|
||
<meta name="description" content="[Furkan Karlioglu-Software Engineer]Explore my site to see my skills in software development, IoT and cybersecurity.Visit my website to explore innovation.🚀"/>
|
||
<meta property="og:description" content="Furkan Karlioglu's personal web site." />
|
||
<meta name="author" content="Furkan KARLIOĞLU">
|
||
<meta name="viewport" content="width=device-width">
|
||
<link rel="canonical" href="https://furk4ngg.github.io/404.html">
|
||
<link href='img/icon.ico' rel='apple-touch-icon'/>
|
||
<script src="JAVASCRIPT/404.js"></script>
|
||
<style>
|
||
body { margin: 0; background: #282c34; overflow: hidden; }
|
||
text, .output {
|
||
fill: white;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-anchor: middle;
|
||
-webkit-user-select:none!important;
|
||
}
|
||
.output {
|
||
-webkit-user-select:none!important;
|
||
position: absolute;
|
||
bottom: 13%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: white;
|
||
font-size: 16px;
|
||
}
|
||
.output a { color: #ff5733; text-decoration: none; font-weight: bold; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg></svg>
|
||
<p class="output">Please try to <a href="javascript:history.back()">go back</a> or <a href="/">return to the homepage</a>.</p>
|
||
|
||
<script>
|
||
let width = window.innerWidth;
|
||
let height = window.innerHeight;
|
||
let attractionForce = 7000; // Çekim gücü negatif olunca baloncuklar birbirini iter
|
||
|
||
const nodes = [
|
||
{ id: 1, radius: 60, text: "Found" },
|
||
{ id: 2, radius: 60, text: "Not" },
|
||
{ id: 3, radius: 60, text: "404" }
|
||
];
|
||
|
||
const svg = d3.select("svg")
|
||
.attr("width", width)
|
||
.attr("height", height);
|
||
|
||
const simulation = d3.forceSimulation(nodes)
|
||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||
.force("collision", d3.forceCollide().radius(d => d.radius + 2))
|
||
.force("attraction", d3.forceManyBody().strength(attractionForce)) // Güç buradan çekiliyor
|
||
.force("x", d3.forceX(width / 2).strength(0.1))
|
||
.force("y", d3.forceY(height / 2).strength(0.1))
|
||
.on("tick", ticked);
|
||
|
||
const bubbles = svg.selectAll("circle")
|
||
.data(nodes)
|
||
.enter()
|
||
.append("circle")
|
||
.attr("r", d => d.radius)
|
||
.attr("fill", "rgba(255, 87, 51, 0.8)")
|
||
.call(d3.drag()
|
||
.on("start", dragStarted)
|
||
.on("drag", dragged)
|
||
.on("end", dragEnded));
|
||
|
||
const texts = svg.selectAll("text")
|
||
.data(nodes)
|
||
.enter()
|
||
.append("text")
|
||
.text(d => d.text)
|
||
.attr("dy", 5);
|
||
|
||
function ticked() {
|
||
bubbles.attr("cx", d => d.x).attr("cy", d => d.y);
|
||
texts.attr("x", d => d.x).attr("y", d => d.y);
|
||
}
|
||
|
||
function dragStarted(event, d) {
|
||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||
d.fx = d.x;
|
||
d.fy = d.y;
|
||
}
|
||
|
||
function dragged(event, d) {
|
||
d.fx = event.x;
|
||
d.fy = event.y;
|
||
}
|
||
|
||
function dragEnded(event, d) {
|
||
if (!event.active) simulation.alphaTarget(0);
|
||
d.fx = null;
|
||
d.fy = null;
|
||
}
|
||
|
||
function resize() {
|
||
width = window.innerWidth;
|
||
height = window.innerHeight;
|
||
svg.attr("width", width).attr("height", height);
|
||
simulation
|
||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||
.force("x", d3.forceX(width / 2).strength(0.1))
|
||
.force("y", d3.forceY(height / 2).strength(0.1))
|
||
.alpha(1).restart();
|
||
}
|
||
|
||
window.addEventListener("resize", resize);
|
||
</script>
|
||
</body>
|
||
</html>
|