ayabusa/Ayabusa-new-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Did some arrows stuff

Browse Source
This commit is contained in:
Ayabusa
2026-03-27 21:18:36 +01:00
parent 535a4584aa
commit a3707f25b3
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
projects/index.html
View File

@@ -7,7 +7,7 @@
</head> </head>
<body id="body"> <body id="body">
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;"> <div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox node" id="n0"> <div class="disbox node" id="proj">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>
@@ -21,7 +21,7 @@
</div> </div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;"> <div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div> <div>
<div class="disbox node" id="n1" style="margin-bottom: 50px;"> <div class="disbox node" id="fich" style="margin-bottom: 50px;">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>
@@ -36,7 +36,7 @@
I develloped it with <b>Golang</b> for the backend and <b>svelte</b> for the frontend, and it has worked pretty well for me :D I develloped it with <b>Golang</b> for the backend and <b>svelte</b> for the frontend, and it has worked pretty well for me :D
</p> </p>
</div> </div>
<div class="disbox node" id="n2"> <div class="disbox node" id="rust">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>
@@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<div style="width: 20px;"></div> <div style="width: 20px;"></div>
<div class="disbox"> <div class="disbox node" id="hack">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>
@@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;"> <div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox node" id="n3"> <div class="disbox node" id="alac">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>
@@ -83,7 +83,7 @@
</div> </div>
</div> </div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;"> <div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox"> <div class="disbox" id="mine">
<div class="disboxh"> <div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img> <img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img> <img class="ico" src="../assets/blogico.png"></img>

16
projects/script.js
View File

@@ -3,9 +3,12 @@
// Arrows go from the bottom-center of the source // Arrows go from the bottom-center of the source
// to the top-center of the target. // to the top-center of the target.
const CONNECTIONS = [ const CONNECTIONS = [
['n0', 'n1'], ['proj', 'fich'],
['n1', 'n2'], ['proj', 'hack'],
['n2', 'n3'], ['fich', 'rust'],
['rust', 'alac'],
['hack', 'alac'],
['alac', 'mine'],
]; ];
// ─── Setup ──────────────────────────────────────────────────── // ─── Setup ────────────────────────────────────────────────────
@@ -65,6 +68,13 @@ function redraw() {
}; };
pathEls[i].setAttribute('d', manhattanPath(r1, r2)); pathEls[i].setAttribute('d', manhattanPath(r1, r2));
if (tgt.left > src.left) {
pathEls[i].style.stroke = "#008000";
} else if (tgt.left < src.left){
pathEls[i].style.stroke = "#ff0000";
} else {
pathEls[i].style.stroke = "#0000ff";
}
}); });
} }