never/nevereverever.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SHARK

Browse source
This commit is contained in:
Never Gude 2026-01-13 17:37:03 +01:00
parent a900655a51
commit f25531690f
20 changed files with 311 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Makefile
View file

@ -20,7 +20,7 @@ articles := $(patsubst %.md,%.html,$(wildcard articles/*.md))
all: index.html about.html all: index.html about.html
install: install:
cp -r index.html about.html $(articles) $(style) $(images) $(INSTALLDIR); \ cp -r index.html about.html shark.js shark.png dvd-logo.png $(articles) $(style) $(images) $(INSTALLDIR); \
clean: clean:
echo '{"articles": []}' > $(article_list); \ echo '{"articles": []}' > $(article_list); \
@ -40,7 +40,7 @@ $(articles): %.html: %.md
index.html: index.md $(articles) index.html: index.md $(articles)
# Build index.html with metadata injected from articles_list # Build index.html with metadata injected from articles_list
pandoc $< --template $(template) --css $(style) --metadata-file $(article_list) --highlight-style zenburn --mathml --toc --output $@; \ pandoc $< --template $(template) --include-after-body shark.js --css $(style) --metadata-file $(article_list) --highlight-style zenburn --mathml --toc --output $@; \
about.html: about.md about.html: about.md
pandoc $< --template $(template) --css $(style) --highlight-style zenburn --mathml --toc --output $@ pandoc $< --template $(template) --css $(style) --highlight-style zenburn --mathml --toc --output $@

1
about.html
View file

@ -25,6 +25,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

1
articles/latex-endeavors.html
View file

@ -26,6 +26,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

1
articles/random-linux-utils.html
View file

@ -90,6 +90,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

6
articles/rsync-android.html
View file

@ -23,8 +23,9 @@
vertical-align: middle; vertical-align: middle;
} }
/* CSS for syntax highlighting */ /* CSS for syntax highlighting */
html { -webkit-text-size-adjust: 100%; }
pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; } pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; } .sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; } code.sourceCode > span { color: inherit; text-decoration: inherit; }
@ -35,7 +36,7 @@
} }
@media print { @media print {
pre > code.sourceCode { white-space: pre-wrap; } pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
} }
pre.numberSource code pre.numberSource code
{ counter-reset: source-line 0; } { counter-reset: source-line 0; }
@ -89,6 +90,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

BIN
dvd-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

69
index.html
View file

@ -25,6 +25,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
@ -88,6 +89,74 @@ rsync to syncronise my library with my Android smartphone.</p>
</nav> </nav>
</section> </section>
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>
<footer id="page-footer"> <footer id="page-footer">
<!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> --> <!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> -->
<p class="cups-light"> <p class="cups-light">

1
pandoc/template.html
View file

@ -35,6 +35,7 @@ $endif$
$endif$ $endif$
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

1
public_html/eh/eh/eh/eh-eh/about.html
View file

@ -25,6 +25,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

BIN
public_html/eh/eh/eh/eh-eh/dvd-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

69
public_html/eh/eh/eh/eh-eh/index.html
View file

@ -25,6 +25,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
@ -88,6 +89,74 @@ rsync to syncronise my library with my Android smartphone.</p>
</nav> </nav>
</section> </section>
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>
<footer id="page-footer"> <footer id="page-footer">
<!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> --> <!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> -->
<p class="cups-light"> <p class="cups-light">

1
public_html/eh/eh/eh/eh-eh/latex-endeavors.html
View file

@ -26,6 +26,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

1
public_html/eh/eh/eh/eh-eh/random-linux-utils.html
View file

@ -90,6 +90,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

6
public_html/eh/eh/eh/eh-eh/rsync-android.html
View file

@ -23,8 +23,9 @@
vertical-align: middle; vertical-align: middle;
} }
/* CSS for syntax highlighting */ /* CSS for syntax highlighting */
html { -webkit-text-size-adjust: 100%; }
pre > code.sourceCode { white-space: pre; position: relative; } pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; } pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; } pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; } .sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; } code.sourceCode > span { color: inherit; text-decoration: inherit; }
@ -35,7 +36,7 @@
} }
@media print { @media print {
pre > code.sourceCode { white-space: pre-wrap; } pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
} }
pre.numberSource code pre.numberSource code
{ counter-reset: source-line 0; } { counter-reset: source-line 0; }
@ -89,6 +90,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<ul> <ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li> <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>

68
public_html/eh/eh/eh/eh-eh/shark.js Normal file
View file

@ -0,0 +1,68 @@
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>

BIN
public_html/eh/eh/eh/eh-eh/shark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 113 KiB

12
public_html/eh/eh/eh/eh-eh/style.css
View file

@ -1,6 +1,6 @@
:root { :root {
--foreground: #1a1a1a; --foreground: #1a1a1a;
--background: #fdfdfd; --background: #fdfdfdf0;
--border: #c9c9c9; --border: #c9c9c9;
--html-background: #e3e3e3; --html-background: #e3e3e3;
--blockquote-text: #606060; --blockquote-text: #606060;
@ -12,7 +12,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--foreground: #fdfdfd; --foreground: #fdfdfd;
--background: #1a1a1a; --background: #1a1a1af0;
--border: #4c4c4c; --border: #4c4c4c;
--html-background: #303030; --html-background: #303030;
--blockquote-text: #e6e6e6; --blockquote-text: #e6e6e6;
@ -22,6 +22,7 @@
} }
} }
html { html {
color: var(--foreground); color: var(--foreground);
/*background: url("recursion.gif");*/ /*background: url("recursion.gif");*/
@ -47,6 +48,13 @@ body {
font-kerning: normal; font-kerning: normal;
} }
#tv-screen {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#page-header { #page-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

68
shark.js Normal file
View file

@ -0,0 +1,68 @@
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>

BIN
shark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 113 KiB

12
style.css
View file

@ -1,6 +1,6 @@
:root { :root {
--foreground: #1a1a1a; --foreground: #1a1a1a;
--background: #fdfdfd; --background: #fdfdfdf0;
--border: #c9c9c9; --border: #c9c9c9;
--html-background: #e3e3e3; --html-background: #e3e3e3;
--blockquote-text: #606060; --blockquote-text: #606060;
@ -12,7 +12,7 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--foreground: #fdfdfd; --foreground: #fdfdfd;
--background: #1a1a1a; --background: #1a1a1af0;
--border: #4c4c4c; --border: #4c4c4c;
--html-background: #303030; --html-background: #303030;
--blockquote-text: #e6e6e6; --blockquote-text: #e6e6e6;
@ -22,6 +22,7 @@
} }
} }
html { html {
color: var(--foreground); color: var(--foreground);
/*background: url("recursion.gif");*/ /*background: url("recursion.gif");*/
@ -47,6 +48,13 @@ body {
font-kerning: normal; font-kerning: normal;
} }
#tv-screen {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#page-header { #page-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;