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

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/**/*" ],
}