theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from theoleuthardt/feat/startpage

Browse source 
Feat/startpage
This commit is contained in:
AurionTex 2025-02-08 15:04:07 +01:00 • committed by GitHub
commit 8793a3954e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 247 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.prettierignore Normal file
View file

@ -0,0 +1,3 @@
# Ignore artifacts:
build
coverage

1
.prettierrc Normal file
View file

@ -0,0 +1 @@
{}

21
README.md
View file

@ -1,7 +1,7 @@
# Werkzeugkiste
**Werkzeugkiste** is a Next.js-based website that offers a collection of useful digital tools and converters.
This platform is designed to provide users with a simple and efficient way to handle various tasks, such as converting
**Werkzeugkiste** is a Next.js-based website that offers a collection of useful digital tools and converters.
This platform is designed to provide users with a simple and efficient way to handle various tasks, such as converting
files, calculating values, or using other handy digital utilities.
## Tech-Stack
@ -29,25 +29,32 @@ To install and run the project locally, follow these steps:
```bash
git clone https://github.com/theoleuthardt/werkzeugkiste.git
cd werkzeugkiste
```
2. **Install the dependencies**:
```bash
npm install
```
3. **Start the website locally with npm**:
```bash
npm run start
```
**or**
3. **Start the website with docker compose**:
```bash
docker compose up -d
```bash
docker compose up -d
```
4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Authors
- [@Domenik Wilhelm](https://www.github.com/AuriomTex)
- [@Theo Leuthardt](https://www.github.com/theoleuthardt)
- [@Theo Leuthardt](https://www.github.com/theoleuthardt)

2
docker-compose.yaml
View file

@ -10,4 +10,4 @@ services:
PORT: 3000
ports:
- "3000:3000"
restart: unless-stopped
restart: unless-stopped

2
next.config.ts
View file

@ -1,7 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: 'standalone',
output: "standalone",
};
export default nextConfig;

17
package-lock.json generated
View file

@ -20,6 +20,7 @@
"eslint": "^9",
"eslint-config-next": "15.1.6",
"postcss": "^8",
"prettier": "3.4.2",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
@ -4537,6 +4538,22 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

13
package.json
View file

@ -9,19 +9,20 @@
"lint": "next lint"
},
"dependencies": {
"next": "15.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.6"
"react-dom": "^19.0.0"
},
"devDependencies": {
"typescript": "^5",
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"@eslint/eslintrc": "^3"
"postcss": "^8",
"prettier": "3.4.2",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

18
src/app/file-to-pdf/layout.tsx Normal file
View file

@ -0,0 +1,18 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "file-to-pdf",
description: "Converter for files to pdf format!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

17
src/app/file-to-pdf/page.tsx Normal file
View file

@ -0,0 +1,17 @@
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Button from "@/components/Button";
export default function Home() {
return (
<div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={true} />
<div className="w-screen h-screen flex flex-col items-center justify-center">
<h2 className="text-5xl font-bold text-white mb-16">file-to-pdf</h2>
<input type="file" className="bg-gray-800 text-white p-2 rounded-lg" />
<Button content="convert" className="text-" />
</div>
<Footer />
</div>
);
}

2
src/app/globals.css
View file

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

6
src/app/layout.tsx
View file

@ -13,11 +13,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body
className={`antialiased`}
>
{children}
</body>
<body className={`antialiased`}>{children}</body>
</html>
);
}

24
src/app/page.tsx
View file

@ -1,7 +1,27 @@
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { toolLinks } from "@/constants";
export default function Home() {
return (
<div className="bg-white w-screen h-screen">
<div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={false} />
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="grid grid-cols-3 gap-6">
{toolLinks.map((tool) => (
<a
key={tool.title}
href={tool.link}
className="text-2xl border-2 border-white p-6 flex justify-center rounded-2xl shadow-md
shadow-white hover:scale-110 hover:transition-scale hover:duration-200
hover:text-blue-400 hover:border-blue-400 hover:shadow-blue-400"
>
{tool.title}
</a>
))}
</div>
</div>
<Footer />
</div>
);
}

BIN
src/assets/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

1
src/assets/logo/icons8-toolbox-128.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128px" height="128px"> <path d="M 43.800781 24.800781 C 40.200781 24.800781 36.799219 26.6 34.699219 29.5 L 13 60.300781 C 12.6 60.800781 12.5 61.4 12.5 62 L 12.5 92.099609 C 12.5 98.199609 17.499609 103.19922 23.599609 103.19922 L 64 103.19922 L 64.5 103.19922 L 64.800781 103.19922 L 104.40039 103.19922 C 110.50039 103.19922 115.5 98.299219 115.5 92.199219 L 115.5 62 C 115.5 61.8 115.50039 61.6 115.40039 61.5 L 115.40039 61.300781 C 115.40039 61.200781 115.30078 61.1 115.30078 61 C 115.30078 60.9 115.29922 60.900781 115.19922 60.800781 C 115.09922 60.700781 115.1 60.6 115 60.5 C 115 60.5 115.00039 60.400391 114.90039 60.400391 L 93.300781 29.5 C 91.200781 26.6 87.799219 24.800781 84.199219 24.800781 C 80.599219 24.800781 77.199609 26.6 75.099609 29.5 L 73.400391 31.900391 L 63.599609 31.900391 C 61.899609 31.900391 60.599609 33.200391 60.599609 34.900391 C 60.599609 36.600391 61.899609 37.900391 63.599609 37.900391 L 80 37.900391 C 81.2 37.900391 82.199219 38.800391 82.199219 39.900391 C 82.199219 41.000391 81.2 41.900391 80 41.900391 L 68 41.900391 C 67 41.900391 66.1 42.399219 65.5 43.199219 L 64 45.300781 L 52.900391 29.5 C 50.800391 26.6 47.400781 24.800781 43.800781 24.800781 z M 43.800781 30.800781 C 45.500781 30.800781 47 31.6 48 33 L 69.099609 63 L 69.099609 92.199219 C 69.099609 94.999219 66.8 97.199219 64 97.199219 L 23.599609 97.199219 C 20.799609 97.199219 18.5 94.899219 18.5 92.199219 L 18.5 63 L 39.599609 33 C 40.599609 31.6 42.100781 30.800781 43.800781 30.800781 z M 84.199219 30.900391 C 85.899219 30.900391 87.400391 31.699609 88.400391 33.099609 L 106.69922 59.099609 L 83.599609 59.099609 L 77.599609 50.599609 L 79.5 47.900391 L 80 47.900391 C 84.5 47.900391 88.199219 44.300391 88.199219 39.900391 C 88.199219 35.800391 85.1 32.5 81 32 C 81.9 31.3 82.999219 30.900391 84.199219 30.900391 z M 43.800781 34.900391 A 5 5 0 0 0 38.800781 39.900391 A 5 5 0 0 0 43.800781 44.900391 A 5 5 0 0 0 48.800781 39.900391 A 5 5 0 0 0 43.800781 34.900391 z M 75.099609 65 L 109.5 65 L 109.5 92.099609 C 109.5 94.899609 107.20039 97.099609 104.40039 97.099609 L 73.900391 97.099609 C 74.600391 95.699609 75.099609 93.899609 75.099609 92.099609 L 75.099609 65 z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/assets/logo/icons8-toolbox-256.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="256px" height="256px"> <path d="M 43.800781 24.800781 C 40.200781 24.800781 36.799219 26.6 34.699219 29.5 L 13 60.300781 C 12.6 60.800781 12.5 61.4 12.5 62 L 12.5 92.099609 C 12.5 98.199609 17.499609 103.19922 23.599609 103.19922 L 64 103.19922 L 64.5 103.19922 L 64.800781 103.19922 L 104.40039 103.19922 C 110.50039 103.19922 115.5 98.299219 115.5 92.199219 L 115.5 62 C 115.5 61.8 115.50039 61.6 115.40039 61.5 L 115.40039 61.300781 C 115.40039 61.200781 115.30078 61.1 115.30078 61 C 115.30078 60.9 115.29922 60.900781 115.19922 60.800781 C 115.09922 60.700781 115.1 60.6 115 60.5 C 115 60.5 115.00039 60.400391 114.90039 60.400391 L 93.300781 29.5 C 91.200781 26.6 87.799219 24.800781 84.199219 24.800781 C 80.599219 24.800781 77.199609 26.6 75.099609 29.5 L 73.400391 31.900391 L 63.599609 31.900391 C 61.899609 31.900391 60.599609 33.200391 60.599609 34.900391 C 60.599609 36.600391 61.899609 37.900391 63.599609 37.900391 L 80 37.900391 C 81.2 37.900391 82.199219 38.800391 82.199219 39.900391 C 82.199219 41.000391 81.2 41.900391 80 41.900391 L 68 41.900391 C 67 41.900391 66.1 42.399219 65.5 43.199219 L 64 45.300781 L 52.900391 29.5 C 50.800391 26.6 47.400781 24.800781 43.800781 24.800781 z M 43.800781 30.800781 C 45.500781 30.800781 47 31.6 48 33 L 69.099609 63 L 69.099609 92.199219 C 69.099609 94.999219 66.8 97.199219 64 97.199219 L 23.599609 97.199219 C 20.799609 97.199219 18.5 94.899219 18.5 92.199219 L 18.5 63 L 39.599609 33 C 40.599609 31.6 42.100781 30.800781 43.800781 30.800781 z M 84.199219 30.900391 C 85.899219 30.900391 87.400391 31.699609 88.400391 33.099609 L 106.69922 59.099609 L 83.599609 59.099609 L 77.599609 50.599609 L 79.5 47.900391 L 80 47.900391 C 84.5 47.900391 88.199219 44.300391 88.199219 39.900391 C 88.199219 35.800391 85.1 32.5 81 32 C 81.9 31.3 82.999219 30.900391 84.199219 30.900391 z M 43.800781 34.900391 A 5 5 0 0 0 38.800781 39.900391 A 5 5 0 0 0 43.800781 44.900391 A 5 5 0 0 0 48.800781 39.900391 A 5 5 0 0 0 43.800781 34.900391 z M 75.099609 65 L 109.5 65 L 109.5 92.099609 C 109.5 94.899609 107.20039 97.099609 104.40039 97.099609 L 73.900391 97.099609 C 74.600391 95.699609 75.099609 93.899609 75.099609 92.099609 L 75.099609 65 z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/assets/logo/icons8-toolbox-512.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="512px" height="512px"> <path d="M 43.800781 24.800781 C 40.200781 24.800781 36.799219 26.6 34.699219 29.5 L 13 60.300781 C 12.6 60.800781 12.5 61.4 12.5 62 L 12.5 92.099609 C 12.5 98.199609 17.499609 103.19922 23.599609 103.19922 L 64 103.19922 L 64.5 103.19922 L 64.800781 103.19922 L 104.40039 103.19922 C 110.50039 103.19922 115.5 98.299219 115.5 92.199219 L 115.5 62 C 115.5 61.8 115.50039 61.6 115.40039 61.5 L 115.40039 61.300781 C 115.40039 61.200781 115.30078 61.1 115.30078 61 C 115.30078 60.9 115.29922 60.900781 115.19922 60.800781 C 115.09922 60.700781 115.1 60.6 115 60.5 C 115 60.5 115.00039 60.400391 114.90039 60.400391 L 93.300781 29.5 C 91.200781 26.6 87.799219 24.800781 84.199219 24.800781 C 80.599219 24.800781 77.199609 26.6 75.099609 29.5 L 73.400391 31.900391 L 63.599609 31.900391 C 61.899609 31.900391 60.599609 33.200391 60.599609 34.900391 C 60.599609 36.600391 61.899609 37.900391 63.599609 37.900391 L 80 37.900391 C 81.2 37.900391 82.199219 38.800391 82.199219 39.900391 C 82.199219 41.000391 81.2 41.900391 80 41.900391 L 68 41.900391 C 67 41.900391 66.1 42.399219 65.5 43.199219 L 64 45.300781 L 52.900391 29.5 C 50.800391 26.6 47.400781 24.800781 43.800781 24.800781 z M 43.800781 30.800781 C 45.500781 30.800781 47 31.6 48 33 L 69.099609 63 L 69.099609 92.199219 C 69.099609 94.999219 66.8 97.199219 64 97.199219 L 23.599609 97.199219 C 20.799609 97.199219 18.5 94.899219 18.5 92.199219 L 18.5 63 L 39.599609 33 C 40.599609 31.6 42.100781 30.800781 43.800781 30.800781 z M 84.199219 30.900391 C 85.899219 30.900391 87.400391 31.699609 88.400391 33.099609 L 106.69922 59.099609 L 83.599609 59.099609 L 77.599609 50.599609 L 79.5 47.900391 L 80 47.900391 C 84.5 47.900391 88.199219 44.300391 88.199219 39.900391 C 88.199219 35.800391 85.1 32.5 81 32 C 81.9 31.3 82.999219 30.900391 84.199219 30.900391 z M 43.800781 34.900391 A 5 5 0 0 0 38.800781 39.900391 A 5 5 0 0 0 43.800781 44.900391 A 5 5 0 0 0 48.800781 39.900391 A 5 5 0 0 0 43.800781 34.900391 z M 75.099609 65 L 109.5 65 L 109.5 92.099609 C 109.5 94.899609 107.20039 97.099609 104.40039 97.099609 L 73.900391 97.099609 C 74.600391 95.699609 75.099609 93.899609 75.099609 92.099609 L 75.099609 65 z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
src/assets/logo/icons8-toolbox-64.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="64px" height="64px"> <path d="M 43.800781 24.800781 C 40.200781 24.800781 36.799219 26.6 34.699219 29.5 L 13 60.300781 C 12.6 60.800781 12.5 61.4 12.5 62 L 12.5 92.099609 C 12.5 98.199609 17.499609 103.19922 23.599609 103.19922 L 64 103.19922 L 64.5 103.19922 L 64.800781 103.19922 L 104.40039 103.19922 C 110.50039 103.19922 115.5 98.299219 115.5 92.199219 L 115.5 62 C 115.5 61.8 115.50039 61.6 115.40039 61.5 L 115.40039 61.300781 C 115.40039 61.200781 115.30078 61.1 115.30078 61 C 115.30078 60.9 115.29922 60.900781 115.19922 60.800781 C 115.09922 60.700781 115.1 60.6 115 60.5 C 115 60.5 115.00039 60.400391 114.90039 60.400391 L 93.300781 29.5 C 91.200781 26.6 87.799219 24.800781 84.199219 24.800781 C 80.599219 24.800781 77.199609 26.6 75.099609 29.5 L 73.400391 31.900391 L 63.599609 31.900391 C 61.899609 31.900391 60.599609 33.200391 60.599609 34.900391 C 60.599609 36.600391 61.899609 37.900391 63.599609 37.900391 L 80 37.900391 C 81.2 37.900391 82.199219 38.800391 82.199219 39.900391 C 82.199219 41.000391 81.2 41.900391 80 41.900391 L 68 41.900391 C 67 41.900391 66.1 42.399219 65.5 43.199219 L 64 45.300781 L 52.900391 29.5 C 50.800391 26.6 47.400781 24.800781 43.800781 24.800781 z M 43.800781 30.800781 C 45.500781 30.800781 47 31.6 48 33 L 69.099609 63 L 69.099609 92.199219 C 69.099609 94.999219 66.8 97.199219 64 97.199219 L 23.599609 97.199219 C 20.799609 97.199219 18.5 94.899219 18.5 92.199219 L 18.5 63 L 39.599609 33 C 40.599609 31.6 42.100781 30.800781 43.800781 30.800781 z M 84.199219 30.900391 C 85.899219 30.900391 87.400391 31.699609 88.400391 33.099609 L 106.69922 59.099609 L 83.599609 59.099609 L 77.599609 50.599609 L 79.5 47.900391 L 80 47.900391 C 84.5 47.900391 88.199219 44.300391 88.199219 39.900391 C 88.199219 35.800391 85.1 32.5 81 32 C 81.9 31.3 82.999219 30.900391 84.199219 30.900391 z M 43.800781 34.900391 A 5 5 0 0 0 38.800781 39.900391 A 5 5 0 0 0 43.800781 44.900391 A 5 5 0 0 0 48.800781 39.900391 A 5 5 0 0 0 43.800781 34.900391 z M 75.099609 65 L 109.5 65 L 109.5 92.099609 C 109.5 94.899609 107.20039 97.099609 104.40039 97.099609 L 73.900391 97.099609 C 74.600391 95.699609 75.099609 93.899609 75.099609 92.099609 L 75.099609 65 z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/logo/icons8-toolbox-pastel-glyph-120.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/logo/icons8-toolbox-pastel-glyph-16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 B

BIN
src/assets/logo/icons8-toolbox-pastel-glyph-32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 474 B

BIN
src/assets/logo/icons8-toolbox-pastel-glyph-96.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

21
src/components/Button.tsx Normal file
View file

@ -0,0 +1,21 @@
"use client";
import React from "react";
interface ButtonProps {
className?: string;
content: string;
onClick?: Function;
}
const Button = (props: ButtonProps) => {
return (
<button
className={`p-3 border-2 border-white rounded-xl ` + props.className}
onClick={() => props.onClick && props.onClick()}
>
{props.content}
</button>
);
};
export default Button;

30
src/components/Footer.tsx Normal file
View file

@ -0,0 +1,30 @@
import React from "react";
interface FooterProps {
className?: string;
}
const Footer = (props: FooterProps) => {
return (
<div className={`h-18 w-full p-3 ` + props.className}>
<div className="text-md text-white font-bold flex flex-row items-center justify-center">
<p>made by</p>
<a
className="mx-2 hover:underline hover:text-blue-400"
href="https://github.com/AuriomTex"
>
Domi
</a>
<p>and</p>
<a
className="mx-2 hover:underline hover:text-blue-400"
href="https://github.com/theoleuthardt"
>
Theo.
</a>
</div>
</div>
);
};
export default Footer;

47
src/components/Navbar.tsx Normal file
View file

@ -0,0 +1,47 @@
import React from "react";
import Image from "next/image";
import LOGO from "../assets/logo/icons8-toolbox-64.svg";
interface NavProps {
className?: string;
renderHomeLink: boolean;
}
const Navbar = (props: NavProps) => {
return (
<div className={`h-18 w-full p-3 ` + props.className}>
<nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
<div className="justify-items-start flex flex-1 flex-row items-center">
<Image
src={LOGO}
alt={""}
width={64}
height={64}
className="invert"
/>
<div className="text-white text-2xl ml-5">werkzeugkiste.</div>
</div>
<div className="flex flex-auto justify-center">
{props.renderHomeLink ? (
<a
href="/"
className="justify-center text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
>
home
</a>
) : null}
</div>
<div className="flex flex-1 justify-end">
<a
href="https://github.com/theoleuthardt/werkzeugkiste"
className="items-end mr-3 text-2xl hover:underline hover:transition-underline hover:duration-300 hover:text-blue-400"
>
github
</a>
</div>
</nav>
</div>
);
};
export default Navbar;

38
src/constants/index.ts Normal file
View file

@ -0,0 +1,38 @@
export const toolLinks = [
{
title: "file-to-pdf",
link: "/file-to-pdf",
},
{
title: "img-to-png",
link: "/img-to-png",
},
{
title: "rgb-to-hex",
link: "/rgb-to-hex",
},
{
title: "video-to-gif",
link: "/video-to-gif",
},
{
title: "qr-code-generator",
link: "/qr-code-generator",
},
{
title: "password-generator",
link: "/password-generator",
},
{
title: "bg-remover",
link: "/bg-remover",
},
{
title: "word-counter",
link: "/word-counter",
},
{
title: "pomodoro-timer",
link: "/pomodoro-timer",
},
];

3
tailwind.config.ts
View file

@ -12,6 +12,9 @@ export default {
background: "var(--background)",
foreground: "var(--foreground)",
},
fontFamily: {
noto: ["Noto Serif", "serif"],
},
},
},
plugins: [],