janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

some component preparations

Browse Source
This commit is contained in:
Janis Hutz
2024-08-26 15:58:28 +02:00
parent 2843e5e3d7
commit f98710f51d
14 changed files with 310 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
ndoe_modules

3
components/README.md Normal file
View File

@@ -0,0 +1,3 @@
# Components
This folder contains all kinds of templates for my websites. These are all (almost) ready to go components I can simply grab, slightly adapt and use directly without having to re-implement everything from scratch. You are allowed to use these components on your own website, but you are not allowed to claim them to be your own work, if you haven't adapted them, but simply added your own images or similar to them.

32
components/scroll/index.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll</title>
<link rel="stylesheet" href="/scroll.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
body {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="scroll-indicator"></div>
<div style="height: 100vh;">
<h1>Scroll</h1>
</div>
<div style="height: 100vh;" class="snap">
<h2>Hello World</h2>
</div>
<script src="https://static.janishutz.com/libs/jquery/jquery.min.js"></script>
<script src="/scroll.js"></script>
<script>
scrollHint( 4 );
</script>
</body>
</html>

73
components/scroll/scroll.css Normal file
View File

@@ -0,0 +1,73 @@
/*
* ConductorCalc - scroll.css
*
* Created by Janis Hutz 01/17/2024, Licensed under a proprietary License
* https://janishutz.com, development@janishutz.com
*
*
*/
#scroll-indicator {
position: fixed;
right: 5%;
z-index: 7;
width: 90%;
bottom: 5%;
display: none;
}
.content {
scroll-snap-type: y mandatory;
}
.snap {
scroll-snap-align: top;
}
.scroll-wrapper {
color: rgb(221, 221, 221);
font-size: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
user-select: none;
}
.scroll-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
padding: 15px;
background-color: rgba( 0, 0, 0, 0.2 );
border-radius: 30px;
}
.scroll-symbol {
font-size: 180%;
animation: scroll-animation infinite 4s ease-in-out;
}
@keyframes scroll-animation {
0% {
opacity: 0;
transform: translateY(0);
}
10% {
opacity: 1;
}
65% {
opacity: 0.8;
}
75% {
opacity: 0;
transform: translateY(25px);
}
100% {
opacity: 0;
}
}

82
components/scroll/scroll.js Normal file
View File

@@ -0,0 +1,82 @@
window.scrollHint = ( maxScroll ) => {
$( () => {
let isShowing = false;
const el = document.getElementById( 'scroll-indicator' );
if ( !el ) {
throw new Error( 'There is no element with ID "scroll-indicator" present on DOM' );
}
el.innerHTML = `
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div>
</div>`;
el.onclick = () => {
if ( window.scrollY === 0 ) {
window.scrollTo( { 'top': window.innerHeight, 'behavior': 'smooth' } );
} else if ( window.scrollY % window.innerHeight === 0 ) {
window.scrollTo( { 'top': ( Math.ceil( window.scrollY / window.innerHeight ) + 1 ) * window.innerHeight, 'behavior': 'smooth' } );
} else {
window.scrollTo( { 'top': Math.ceil( window.scrollY / window.innerHeight ) * window.innerHeight, 'behavior': 'smooth' } );
}
$( '#scroll-indicator' ).fadeOut( 300 );
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
isShowing = false;
timeout = setTimeout( () => { showHint() }, 2500 );
}
document.onscrollend = () => {
scrollCorrectionTimeout = setTimeout( () => {
scrollCorrection();
}, 1000 );
timeout = setTimeout( () => {
showHint();
}, 2500 );
}
document.onscroll = () => {
try {
clearTimeout( timeout );
} catch ( _e ) {}
try {
clearTimeout( scrollCorrectionTimeout );
} catch ( _err ) {};
if ( isShowing ) {
isShowing = false;
$( '#scroll-indicator' ).fadeOut( 300 );
}
};
window.onresize = () => {
scrollCorrection();
showHint();
}
let timeout = setTimeout( () => {
showHint();
}, 2500 );
let scrollCorrectionTimeout = 0;
const showHint = () => {
if ( Math.round( window.scrollY / window.innerHeight ) < maxScroll && maxScroll > 0 ) {
$( '#scroll-indicator' ).fadeIn( 300 );
isShowing = true;
} else {
$( '#scroll-indicator' ).fadeOut( 300 );
isShowing = false;
}
}
const scrollCorrection = () => {
if ( Math.round( window.scrollY / window.innerHeight ) <= maxScroll && maxScroll > 0 && Math.floor( window.scrollY / window.innerHeight ) < maxScroll ) {
window.scrollTo( { top: Math.round( window.scrollY / window.innerHeight ) * window.innerHeight, behavior: 'smooth' } );
}
}
scrollCorrection();
} );
}

33
components/slider/index.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider</title>
<style>
body, html {
margin: 0;
width: 100%;
height: 100%;
width: 100%;
padding: 0;
}
</style>
<link rel="stylesheet" href="/slider.css">
</head>
<body>
<h1>Sliders</h1>
<!-- Style the slider class with width, height and borders, don't touch the other classes, except for colours -->
<div class="slider" style="width: 100vw; height: 80vh;">
<div class="slider-container">
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/math-summaries-desktop.jpg' );"></div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/libreevent-desktop.jpg' );"></div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/promo-images/donate-desktop.jpg' );"></div>
</div>
<div class="slider-controls slider-control-left">&#11164;</div>
<div class="slider-controls slider-control-right">&#11166;</div>
</div>
<script src="/js/slider.js"></script>
</body>
</html>

0
components/slider/js/slider.js Normal file
View File

25
components/slider/package-lock.json generated Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "slider",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"typescript": "^5.5.4"
}
},
"node_modules/typescript": {
"version": "5.5.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
}
}
}

5
components/slider/package.json Normal file
View File

@@ -0,0 +1,5 @@
{
"dependencies": {
"typescript": "^5.5.4"
}
}

35
components/slider/slider.css Normal file
View File

@@ -0,0 +1,35 @@
.slider {
overflow: hidden;
position: relative;
}
.slider-container {
width: 100%;
height: 100%;
position: relative;
}
.slider-controls {
position: absolute;
font-size: 3rem;
top: calc( 50% - 1.5rem );
cursor: pointer;
user-select: none;
}
.slider-control-left {
left: 10px;
}
.slider-control-right {
right: 10px;
}
.slider-element {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-size: cover;
background-position: center;
}

0
components/slider/ts/slider.ts Normal file
View File

9
components/slider/tsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"compilerOptions": {
"outDir": "./js",
"allowJs": true,
"target": "ES6",
"skipLibCheck": true,
},
"include": [ "./ts/**/*" ],
}

11
site/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>janishutz.com - Solving your software needs with passion</title>
</head>
<body>
</body>
</html>