Formatting documents

This commit is contained in:
aronmal 2023-04-16 13:16:49 +02:00
parent 6e2b0b2360
commit 03d66f6d1c
Signed by: aronmal
GPG key ID: 816B7707426FC612
15 changed files with 1615 additions and 1342 deletions

View file

@ -1,7 +1,5 @@
{
"semi": false,
"plugins": [
"@trivago/prettier-plugin-sort-imports"
],
"plugins": ["@trivago/prettier-plugin-sort-imports"],
"pluginSearchDirs": false
}

View file

@ -1,41 +1,41 @@
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
"name": "App",
"icons": [
{
"src": "/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}

View file

@ -1,4 +1,4 @@
import { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from "next/document"
export default function Document() {
return (

View file

@ -1,13 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

View file

@ -1,9 +1,9 @@
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import styles from "@/styles/Home.module.css"
import { Inter } from "next/font/google"
import Head from "next/head"
import Image from "next/image"
const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] })
export default function Home() {
return (
@ -26,7 +26,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
>
By{' '}
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"

View file

@ -97,7 +97,7 @@
.center::before,
.center::after {
content: '';
content: "";
left: 50%;
position: absolute;
filter: blur(45px);

View file

@ -1,9 +1,9 @@
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;

View file

@ -1,273 +1,408 @@
*{
scroll-margin-block-start: 60px;
scroll-margin-block-end: 60px;
box-sizing: border-box;
scroll-behavior: smooth;
max-width: 100%;
max-height: 100%;
* {
scroll-margin-block-start: 60px;
scroll-margin-block-end: 60px;
box-sizing: border-box;
scroll-behavior: smooth;
max-width: 100%;
max-height: 100%;
}
::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-track {background: rgb(41, 41, 41);}
::-webkit-scrollbar-thumb {background: #7f5af0;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #555;}
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
background: #7f5af0;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
[class*="col-"] {float: left;}
.row{clear: both;}
[class*="col-"] {
float: left;
}
.row {
clear: both;
}
#navbar {
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
background-color:#121629;
position: fixed;
top: 0;
width: 155px;
height: 100%;
margin-left: -8px;
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
background-color: #121629;
position: fixed;
top: 0;
width: 155px;
height: 100%;
margin-left: -8px;
}
#navbar button{border-radius: 16px;scale: 0.9;}
#navbar button:hover{scale: 1.06;}
#navbar button {
border-radius: 16px;
scale: 0.9;
}
#navbar button:hover {
scale: 1.06;
}
#navbar a {
float: none;
display: block;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
float: none;
display: block;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
}
#navbar a:hover {
background: #eff0f3;
color: #121629;
cursor: pointer;
background: #eff0f3;
color: #121629;
cursor: pointer;
}
#sidenavbar {
z-index: 1;
margin-left: -8px;
overflow: visible;
background-color:#121629;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
text-align: left;
display: flex;
justify-content: space-between;
z-index: 1;
margin-left: -8px;
overflow: visible;
background-color: #121629;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
text-align: left;
display: flex;
justify-content: space-between;
}
#sidenavbar button{all: unset;}
#sidenavbar button {
all: unset;
}
#sidenavbar a, button {
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 1.4em;
border: none;
#sidenavbar a,
button {
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 1.4em;
border: none;
}
#sidenavbar a:hover {
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
}
#sidenavbar button{all: unset;}
.main {height: 100%;}
#sidenavbar button {
all: unset;
}
.main {
height: 100%;
}
body {
background-color: #16161a;
color: #94a1b2;
text-align: center;
font-size: 1.4em;
background-color: #16161a;
color: #94a1b2;
text-align: center;
font-size: 1.4em;
}
h1 {
font-size: 2.5em;
color: #fffffe;
}
h2 {
font-size: 2em;
color: #fffffe;
}
h3 {
font-size: 1.6em;
clear: both;
color: #fffffe;
}
p {
text-align: justify;
font-size: 0.875em;
}
header {
text-align: center;
padding-left: 140px;
}
h1 {font-size: 2.5em;color: #fffffe;}
h2 {font-size: 2em;color: #fffffe;}
h3 {font-size: 1.6em; clear: both;color: #fffffe;}
p {text-align: justify;font-size: 0.875em;}
header {text-align: center;padding-left: 140px;}
footer,
aside,
article {
text-align: center;
padding-left: 15px;
margin: 1.5%;
margin-left: 145px;
text-align: center;
padding-left: 15px;
margin: 1.5%;
margin-left: 145px;
}
img {
width: 100%;
max-width: max-content;
height: auto;
margin-top: -8px;
width: 100%;
max-width: max-content;
height: auto;
margin-top: -8px;
}
button {
background-color:#121629;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
background-color: #121629;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
}
p a {
text-align: justify;
text-decoration: underline;
color:#94a1b2;
text-align: justify;
text-decoration: underline;
color: #94a1b2;
}
p a:hover {
color: rgb(225, 59, 59);
}
b {
color: #91c4ff;
}
p a:hover {color: rgb(225, 59, 59);}
b{color:#91c4ff;}
.righties {
margin: 0 2%;
margin-right: 0%;
padding: 0%;
width: 33%;
float: right;
transition: width 1.5s;
clear: both;
margin: 0 2%;
margin-right: 0%;
padding: 0%;
width: 33%;
float: right;
transition: width 1.5s;
clear: both;
}
.righties:hover {
width: 50%;
}
.righties:hover {width: 50%;}
.lefties {
margin-right: 20px;
width: 33%;
height: 100%;
float: left;
transition: width 1.5s;
display: none;
margin-right: 20px;
width: 33%;
height: 100%;
float: left;
transition: width 1.5s;
display: none;
}
.lefties:hover {
width: 50%;
}
.lefties:hover {width: 50%;}
#vcutout {
width: 25%;
}
#vcutout:hover {
width: 30%;
}
#vcutout{width: 25%;}
#vcutout:hover {width: 30%;}
.hidden{
/*position:absolute;
.hidden {
/*position:absolute;
transform:translate(-50%,-50%);
height:200px;
width:200px; */
float: left;
padding: 2%;
padding-left: 0%;
display: none;
float: left;
padding: 2%;
padding-left: 0%;
display: none;
}
/*wenn hover über text, zeige bild*/
.imghover:hover + .hidden{display: block;}
.imghover:hover + .hidden {
display: block;
}
.light-mode {
background-color:#eff0f3;
color:#2a2a2a;
background-color: #eff0f3;
color: #2a2a2a;
}
.light-mode article p a{
text-align: justify;
text-decoration: underline;
color:#2a2a2a;
.light-mode article p a {
text-align: justify;
text-decoration: underline;
color: #2a2a2a;
}
.light-mode b {
color: #2a2a2a;
}
.light-mode b a {
color: #2a2a2a;
}
.light-mode h3 {
color: #2a2a2a;
}
.light-mode h1 {
color: #2a2a2a;
}
.light-mode h2 {
color: #2a2a2a;
}
.light-mode #navbar {
background-color: #b8c1ec;
}
.light-mode #sidenavbar {
background-color: #b8c1ec;
}
.light-mode #navbar a {
color: black;
}
.light-mode #sidenavbar a {
color: black;
}
.light-mode button {
background-color: #b8c1ec;
color: black;
}
.light-mode b{color:#2a2a2a;}
.light-mode b a{color: #2a2a2a;}
.light-mode h3 {color: #2a2a2a;}
.light-mode h1 {color: #2a2a2a;}
.light-mode h2 {color: #2a2a2a;}
.light-mode #navbar {background-color: #b8c1ec;}
.light-mode #sidenavbar {background-color: #b8c1ec;}
.light-mode #navbar a {color: black;}
.light-mode #sidenavbar a {color: black;}
.light-mode button {background-color: #b8c1ec;color: black;}
/*Raster Einstellungen*/
.light-mode .raster {background-color: #eff0f3;}
.light-mode a {color:#2a2a2a;}
a {color: rgb(225, 223, 210);}
.light-mode .raster {
background-color: #eff0f3;
}
.light-mode a {
color: #2a2a2a;
}
a {
color: rgb(225, 223, 210);
}
.raster {
width: 300px;
height: 350px;
float: left;
padding: 1%;
padding-top: 0;
border: #555;
border-width: 2px;
border-style: solid;
border-radius: 10%;
scale: 0.9;
font-size: 0.9em;
width: 300px;
height: 350px;
float: left;
padding: 1%;
padding-top: 0;
border: #555;
border-width: 2px;
border-style: solid;
border-radius: 10%;
scale: 0.9;
font-size: 0.9em;
}
a div img, a div video{
border-radius: 10%;
max-width: 260px;
max-height: 290px;
padding-top: 8px;
bottom: 0;
a div img,
a div video {
border-radius: 10%;
max-width: 260px;
max-height: 290px;
padding-top: 8px;
bottom: 0;
}
a div h3 {margin: 0.5%;}
.raster:hover {scale: 1.06;}
.raster:hover a div img {width: 110%;}
.logos {height: 1.6em; margin-bottom: -18px;}
.col-1 {width: 8.33%;}
.col-2 {width: 12.5%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media (max-width: 767px)/*unter handy größe*/{
header,article,img,p,h1,h2,h3 {margin-left: 0%;padding-left: 0;}
[class*="col-"] {width: 100%;}
#navbar {visibility: hidden;}
#sidenavbar {visibility: visible;}
/*.raster {width: calc(100%/2);}*/
.righties {width: 100%;}
.righties:hover {width: 100%;}
a div h3 {
margin: 0.5%;
}
.raster:hover {
scale: 1.06;
}
.raster:hover a div img {
width: 110%;
}
@media only screen and (min-width: 767px)/*über handy größe*/ {
#navbar {visibility: visible;}
#sidenavbar {visibility: hidden;}
/*.raster {width: calc(100%/5);}*/
div div button {visibility: hidden;}
.logos {
height: 1.6em;
margin-bottom: -18px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 12.5%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
@media (max-width: 767px) /*unter handy größe*/ {
header,
article,
img,
p,
h1,
h2,
h3 {
margin-left: 0%;
padding-left: 0;
}
[class*="col-"] {
width: 100%;
}
#navbar {
visibility: hidden;
}
#sidenavbar {
visibility: visible;
}
/*.raster {width: calc(100%/2);}*/
.righties {
width: 100%;
}
.righties:hover {
width: 100%;
}
}
@media only screen and (min-width: 767px) /*über handy größe*/ {
#navbar {
visibility: visible;
}
#sidenavbar {
visibility: hidden;
}
/*.raster {width: calc(100%/5);}*/
div div button {
visibility: hidden;
}
}
/*@media screen and (min-width:1200px) {.raster {width: calc(100%/6);}}
@media screen and (min-width:1500px) {.raster {width: calc(100%/8);}}*/
@media screen and (min-width:1900px)/*HD Fullscreen only*/ {
.lefties {display: block;width: 27%;}
.righties {width: 27%;}
@media screen and (min-width: 1900px) /*HD Fullscreen only*/ {
.lefties {
display: block;
width: 27%;
}
.righties {
width: 27%;
}
}
@media screen and (min-width:2250px)/*ab 2000px nicht weiter skalieren*/ {
*{
@media screen and (min-width: 2250px) /*ab 2000px nicht weiter skalieren*/ {
* {
width: 1950px;
margin-left: auto;
margin-right: auto;
}
}
}

View file

@ -1,108 +1,152 @@
* {box-sizing: border-box;}
::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-track {background: rgb(41, 41, 41);}
::-webkit-scrollbar-thumb {background: #7f5af0;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #555;}
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
background: #7f5af0;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
[class*="col-"] {
float: right;
float: right;
}
#sidenavbar {
z-index: 1;
margin-left: -8px;
overflow: visible;
background-color:#121629;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
text-align: left;
display: flex;
justify-content: space-between;
z-index: 1;
margin-left: -8px;
overflow: visible;
background-color: #121629;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
text-align: left;
display: flex;
justify-content: space-between;
}
#sidenavbar button{all: unset;}
#sidenavbar button {
all: unset;
}
#sidenavbar a, button {
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 1.4em;
border: none;
#sidenavbar a,
button {
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 1.4em;
border: none;
}
#sidenavbar a:hover {
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
}
#sidenavbar button{border: none;}
#sidenavbar button {
border: none;
}
.main {height: 100%;}
.main {
height: 100%;
}
body {
background-color: #16161a;
color: #94a1b2;
font-size: 1.4em;
background-color: #16161a;
color: #94a1b2;
font-size: 1.4em;
}
h1 {font-size: 2.5em;}
h1 {
font-size: 2.5em;
}
h2 {font-size: 2em;}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.6em;
margin-left: 140px;
font-size: 1.6em;
margin-left: 140px;
}
p {
text-align: justify;
font-size: 0.875em;
text-align: justify;
font-size: 0.875em;
}
header {text-align: center;}
header {
text-align: center;
}
footer,
aside,
article {
text-align: center;
padding: 2%;
margin: 1.5%;
text-align: center;
padding: 2%;
margin: 1.5%;
}
img {
width: 100%;
max-width: max-content;
padding: 16px;
height: auto;
width: 100%;
max-width: max-content;
padding: 16px;
height: auto;
display: block;
display: block;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
@media only screen and (max-width: 767px) {
[class*="col-"] {
width: 100%;
}
[class*="col-"] {
width: 100%;
}
}

View file

@ -1,211 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="57x57" href="favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<head>
<link
rel="apple-touch-icon"
sizes="57x57"
href="favicon/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="favicon/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="favicon/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="favicon/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="favicon/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="favicon/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="favicon/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="favicon/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicon/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="favicon/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="favicon/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicon/favicon-16x16.png"
/>
<link rel="manifest" href="favicon/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="favicon/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KS S22</title>
<link rel="stylesheet" href="Geräte.css">
</head>
<body>
<link rel="stylesheet" href="Geräte.css" />
</head>
<body>
<div id="sidenavbar">
<a href="javascript:history.back()">Zurück</a>
<a href="EUC Überblick DE.html">Start</a>
<a href="javascript:history.back()">Zurück</a>
<a href="EUC Überblick DE.html">Start</a>
</div>
<div class="row">
<div class="col-4">
<img src="KS S22/S22shutterkode2.jpg" />
</div>
<div class="col-4">
<img src="KS S22/S22shutterkode2.jpg" />
</div>
<div class="col-8">
<article>
<h2>Kingsong S22</h2>
<div class="col-8">
<article>
<h2>Kingsong S22</h2>
<p>Das Kingsong S22, früher S20, ist ein klar Offroad und Trail orientiertes Einrad. Es hat unter anderem 130mm travel und eine robuste Metallkonstruktion, welches es einmalig ideal für große Sprünge und hohe Drops macht. </p>
<p>
Das Kingsong S22, früher S20, ist ein klar Offroad und Trail
orientiertes Einrad. Es hat unter anderem 130mm travel und eine
robuste Metallkonstruktion, welches es einmalig ideal für große
Sprünge und hohe Drops macht.
</p>
<p>Es ist der Nachfolger vom kleineren S18, aber mit doppeltem Akku und 50% mehr Motor Leistung, so wie 70 statt 50 km/h top Geschwindigkeit. Wobei der Freespin bis zu 114 km/h hoch ist, also ideal für längere Sprünge bei denen der Reifen in der Luft ist. </p>
<p>
Es ist der Nachfolger vom kleineren S18, aber mit doppeltem Akku und
50% mehr Motor Leistung, so wie 70 statt 50 km/h top
Geschwindigkeit. Wobei der Freespin bis zu 114 km/h hoch ist, also
ideal für längere Sprünge bei denen der Reifen in der Luft ist.
</p>
<p>Außerdem hat es gleich mitgeliefert einen Sitz, ziemlich brauchbare Jump wie Powerpads und Spiked-Pedals. Dazu einen robusten, wenn auch komisch platzierten und etwas kurzen Trolleyhandle, sowie einen stabilen Kickstand und höhenverstellbare helle Lichter. Es ist Wasserfest, aber nicht eintauchbar, und das Beste: es ist superleicht daran zu arbeiten, weil das Gerät sehr modular designt wurde. So lässt sich der Reifen mit theoretisch nur 2 schrauben rausnehmen</p>
<p>
Außerdem hat es gleich mitgeliefert einen Sitz, ziemlich brauchbare
Jump wie Powerpads und Spiked-Pedals. Dazu einen robusten, wenn auch
komisch platzierten und etwas kurzen Trolleyhandle, sowie einen
stabilen Kickstand und höhenverstellbare helle Lichter. Es ist
Wasserfest, aber nicht eintauchbar, und das Beste: es ist
superleicht daran zu arbeiten, weil das Gerät sehr modular designt
wurde. So lässt sich der Reifen mit theoretisch nur 2 schrauben
rausnehmen
</p>
<p>Während all das wahr ist, haben sich leider mit diesem hoch erwartetem und gehypten Rad auch viele Probleme ergeben. So gab es Motorprobleme mit den ersten Geräten, welche zu cut-offs führten und dadurch das Motherboard durchbrannten. Auch ist das Slider Design sehr schwerfällig und über die Zeit immer schwerer zu bewegen. So mussten viele s22 Käufer lange auf Ersatzmotoren warten, so wie für 100 bis 200€ die Slider upgraden. Mit den Upgrades jedoch ist es das momentan bester Suspension Einrad auf dem Markt. (Bis das Veteran Sherman S zu kaufen ist.)</p>
</article>
</div>
<p>
Während all das wahr ist, haben sich leider mit diesem hoch
erwartetem und gehypten Rad auch viele Probleme ergeben. So gab es
Motorprobleme mit den ersten Geräten, welche zu cut-offs führten und
dadurch das Motherboard durchbrannten. Auch ist das Slider Design
sehr schwerfällig und über die Zeit immer schwerer zu bewegen. So
mussten viele s22 Käufer lange auf Ersatzmotoren warten, so wie für
100 bis 200€ die Slider upgraden. Mit den Upgrades jedoch ist es das
momentan bester Suspension Einrad auf dem Markt. (Bis das Veteran
Sherman S zu kaufen ist.)
</p>
</article>
</div>
</div>
<div class="row">
<div class="col-4"><img src="KS S22/S22shutterkode5.jpg" /></div>
<div class="col-4"><img src="KS S22/BusJump.jpg" /></div>
<div class="col-4"><img src="KS S22/S22shutterkode4.jpg"/></div>
<div class="col-4"><img src="KS S22/S22shutterkode5.jpg" /></div>
<div class="col-4"><img src="KS S22/BusJump.jpg" /></div>
<div class="col-4"><img src="KS S22/S22shutterkode4.jpg" /></div>
</div>
<table>
<tr>
<td>Größe</td>
<td>582L 330W 747H</td>
</tr>
<tr>
<td>Radumfang</td>
<td>20 inch</td>
</tr>
<tr>
<td>Pedalhöhe</td>
<td>231+-26mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>35kg</td>
</tr>
<tr>
<td>Suspension travel (bei Federung)</td>
<td>130mm</td>
</tr>
<tr>
<td>Suspension Type (bei Federung)</td>
<td>Oil Shock</td>
</tr>
<tr>
<td>Suspension Adjustments (bei Federung)</td>
<td>Rebound, compression</td>
</tr>
<tr>
<td>Freespin</td>
<td>114kmh</td>
</tr>
<tr>
<td>Top speed</td>
<td>70kmh</td>
</tr>
<tr>
<td>Reichweite bei 30kmh</td>
<td>200km</td>
</tr>
<tr>
<td>Minimale Reichweite bei starker Nutzung</td>
<td>70km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. Zuladung</td>
<td>120kg</td>
</tr>
<tr>
<td>Motor Typ</td>
<td>High Speed</td>
</tr>
<tr>
<td>Motor Leistung</td>
<td>3300W</td>
</tr>
<tr>
<td>Peak Leistung</td>
<td>7500W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2220wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100A</td>
</tr>
<tr>
<td>BMS</td>
<td>Smart BMS</td>
</tr>
<tr>
<td>Battery cell type</td>
<td>LG 18600</td>
</tr>
<tr>
<td>IP Rating</td>
<td>nope</td>
</tr>
<tr>
<td>Accessoires</td>
<td>Powerpads, Jumppads, Seat, Spiked-Pedals</td>
</tr>
<tr>
<td>Lichter</td>
<td>8x5W Verstellbare Scheinwerfer</td>
</tr>
<tr>
<td>Standard Reifen</td>
<td>Nobby</td>
</tr>
<tr>
<td>Anti spin button?</td>
<td>im Griff</td>
</tr>
<tr>
<td>Display?</td>
<td>Dot-Matrix</td>
</tr>
<tr>
<td>RGB?</td>
<td>Rücklicht</td>
</tr>
<tr>
<td>Pads?</td>
<td>Alle inklusive</td>
</tr>
<tr>
<td>Ladeausgänge?</td>
<td>nope</td>
</tr>
<tr>
<td>Ladegerät:</td>
<td></td>
</tr>
<tr>
<td>Standard Ladezeit:</td>
<td>3.3h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10A</td>
</tr>
<tr>
<td>Schnellste Ladezeit:</td>
<td>100 Min</td>
</tr>
<tr>
<td>Ladeports:</td>
<td>2</td>
</tr>
<tr>
<td>Größe</td>
<td>582L 330W 747H</td>
</tr>
<tr>
<td>Radumfang</td>
<td>20 inch</td>
</tr>
<tr>
<td>Pedalhöhe</td>
<td>231+-26mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>35kg</td>
</tr>
<tr>
<td>Suspension travel (bei Federung)</td>
<td>130mm</td>
</tr>
<tr>
<td>Suspension Type (bei Federung)</td>
<td>Oil Shock</td>
</tr>
<tr>
<td>Suspension Adjustments (bei Federung)</td>
<td>Rebound, compression</td>
</tr>
<tr>
<td>Freespin</td>
<td>114kmh</td>
</tr>
<tr>
<td>Top speed</td>
<td>70kmh</td>
</tr>
<tr>
<td>Reichweite bei 30kmh</td>
<td>200km</td>
</tr>
<tr>
<td>Minimale Reichweite bei starker Nutzung</td>
<td>70km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. Zuladung</td>
<td>120kg</td>
</tr>
<tr>
<td>Motor Typ</td>
<td>High Speed</td>
</tr>
<tr>
<td>Motor Leistung</td>
<td>3300W</td>
</tr>
<tr>
<td>Peak Leistung</td>
<td>7500W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2220wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100A</td>
</tr>
<tr>
<td>BMS</td>
<td>Smart BMS</td>
</tr>
<tr>
<td>Battery cell type</td>
<td>LG 18600</td>
</tr>
<tr>
<td>IP Rating</td>
<td>nope</td>
</tr>
<tr>
<td>Accessoires</td>
<td>Powerpads, Jumppads, Seat, Spiked-Pedals</td>
</tr>
<tr>
<td>Lichter</td>
<td>8x5W Verstellbare Scheinwerfer</td>
</tr>
<tr>
<td>Standard Reifen</td>
<td>Nobby</td>
</tr>
<tr>
<td>Anti spin button?</td>
<td>im Griff</td>
</tr>
<tr>
<td>Display?</td>
<td>Dot-Matrix</td>
</tr>
<tr>
<td>RGB?</td>
<td>Rücklicht</td>
</tr>
<tr>
<td>Pads?</td>
<td>Alle inklusive</td>
</tr>
<tr>
<td>Ladeausgänge?</td>
<td>nope</td>
</tr>
<tr>
<td>Ladegerät:</td>
<td></td>
</tr>
<tr>
<td>Standard Ladezeit:</td>
<td>3.3h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10A</td>
</tr>
<tr>
<td>Schnellste Ladezeit:</td>
<td>100 Min</td>
</tr>
<tr>
<td>Ladeports:</td>
<td>2</td>
</tr>
</table>
</body>
</body>
</html>

View file

@ -1,82 +1,109 @@
*{
scroll-margin-block-start: 60px;
scroll-margin-block-end: 60px;
box-sizing: border-box;
scroll-behavior: smooth;
max-width: 100%;
max-height: 100%;
* {
scroll-margin-block-start: 60px;
scroll-margin-block-end: 60px;
box-sizing: border-box;
scroll-behavior: smooth;
max-width: 100%;
max-height: 100%;
}
::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-track {background: rgb(41, 41, 41);}
::-webkit-scrollbar-thumb {background:#ff8906;border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #555;}
::-webkit-scrollbar {
width: 9px;
}
::-webkit-scrollbar-track {
background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
background: #ff8906;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
[class*="col-"] {float: left;}
.row{clear: both;}
[class*="col-"] {
float: left;
}
.row {
clear: both;
}
body {
background-color: #0f0e17;
color:#a7a9be;
text-align: left;
font-size: 1.4em;
max-width: 900px;
margin: auto;
background-color: #0f0e17;
color: #a7a9be;
text-align: left;
font-size: 1.4em;
max-width: 900px;
margin: auto;
}
p {padding: 10px;}
p {
padding: 10px;
}
#cover {opacity: 60%;}
#cover {
opacity: 60%;
}
.container {
position: relative;
text-align: center;
color: white;
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gone {
display: none;
color: #fffffe;
text-align: center;
display: none;
color: #fffffe;
text-align: center;
}
#MoreButton{
margin: auto;
position: relative;
height: auto;
max-height: max-content;
width: auto;
max-width: max-content;
background-color:#ff8906;
border-radius: 5px;
color: #fffffe;
font-size: 1.2em;
#MoreButton {
margin: auto;
position: relative;
height: auto;
max-height: max-content;
width: auto;
max-width: max-content;
background-color: #ff8906;
border-radius: 5px;
color: #fffffe;
font-size: 1.2em;
}
a {text-decoration: none;}
a div p{
text-align: center;
padding: 20px;
a {
text-decoration: none;
}
a div p {
text-align: center;
padding: 20px;
}
a :hover {
scale: 1.06;
}
a :hover{scale: 1.06;}
.righties {
padding-bottom: 30px;
padding-top: 20px;
padding-bottom: 30px;
padding-top: 20px;
width: 100%;
clear: both;
}
@media (max-width: 767px) /*unter handy größe*/ {
.centered {
display: none;
}
#gone {
display: block;
}
#cover {
opacity: 100%;
}
.righties {
width: 100%;
clear: both;
}
@media (max-width: 767px)/*unter handy größe*/{
.centered {display: none;}
#gone {display: block;}
#cover {opacity: 100%;}
.righties {width: 100%;}
}
}