aronmal/jg-eucs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Formatting documents

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
.prettierrc.json
View file

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

2
README.md
View file

@ -1 +1 @@
# jg-eucs # jg-eucs

80
public/favicon/manifest.json
View file

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

2
src/pages/_document.tsx
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() { export default function Document() {
return ( return (

13
src/pages/api/hello.ts
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' })
}

12
src/pages/index.tsx
View file

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

2
src/styles/Home.module.css
View file

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

6
src/styles/globals.css
View file

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

681
todo/EUC Überblick.css
View file

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

260
todo/Geräte.css
View file

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

504
todo/KSS22DE.html
View file

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

578
todo/KSS22ENG.html
View file

@ -1,289 +1,289 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="57x57" sizes="57x57"
href="favicon/apple-icon-57x57.png" href="favicon/apple-icon-57x57.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="60x60" sizes="60x60"
href="favicon/apple-icon-60x60.png" href="favicon/apple-icon-60x60.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="72x72" sizes="72x72"
href="favicon/apple-icon-72x72.png" href="favicon/apple-icon-72x72.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="76x76" sizes="76x76"
href="favicon/apple-icon-76x76.png" href="favicon/apple-icon-76x76.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="114x114" sizes="114x114"
href="favicon/apple-icon-114x114.png" href="favicon/apple-icon-114x114.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="120x120" sizes="120x120"
href="favicon/apple-icon-120x120.png" href="favicon/apple-icon-120x120.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="144x144" sizes="144x144"
href="favicon/apple-icon-144x144.png" href="favicon/apple-icon-144x144.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="152x152" sizes="152x152"
href="favicon/apple-icon-152x152.png" href="favicon/apple-icon-152x152.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
href="favicon/apple-icon-180x180.png" href="favicon/apple-icon-180x180.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="192x192" sizes="192x192"
href="favicon/android-icon-192x192.png" href="favicon/android-icon-192x192.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="32x32" sizes="32x32"
href="favicon/favicon-32x32.png" href="favicon/favicon-32x32.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="96x96" sizes="96x96"
href="favicon/favicon-96x96.png" href="favicon/favicon-96x96.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="16x16" sizes="16x16"
href="favicon/favicon-16x16.png" href="favicon/favicon-16x16.png"
/> />
<link rel="manifest" href="favicon/manifest.json" /> <link rel="manifest" href="favicon/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileColor" content="#ffffff" />
<meta <meta
name="msapplication-TileImage" name="msapplication-TileImage"
content="favicon/ms-icon-144x144.png" content="favicon/ms-icon-144x144.png"
/> />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KS S22</title> <title>KS S22</title>
<link rel="stylesheet" href="Geräte.css" /> <link rel="stylesheet" href="Geräte.css" />
</head> </head>
<body> <body>
<div id="sidenavbar"> <div id="sidenavbar">
<a href="javascript:history.back()">Zurück</a> <a href="javascript:history.back()">Zurück</a>
<a href="EUC Überblick DE.html">Start</a> <a href="EUC Überblick DE.html">Start</a>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<img src="KS S22/S22shutterkode2.jpg" /> <img src="KS S22/S22shutterkode2.jpg" />
</div> </div>
<div class="col-8"> <div class="col-8">
<article> <article>
<h2>Kingsong S22</h2> <h2>Kingsong S22</h2>
<p> <p>
The Kingsong S22, formerly S20, is a clearly off-road and trail The Kingsong S22, formerly S20, is a clearly off-road and trail
oriented unicycle. Among other things, it has 130mm suspension oriented unicycle. Among other things, it has 130mm suspension
travel and a robust metal construction, which makes it ideal for big travel and a robust metal construction, which makes it ideal for big
jumps and high drops. jumps and high drops.
</p> </p>
<p> <p>
It is the successor to the smaller S18, but with double the battery It is the successor to the smaller S18, but with double the battery
and 50% more motor power, such as a top speed of 70 instead of 50 and 50% more motor power, such as a top speed of 70 instead of 50
km/h. The freespin is up to 114 km/h, so ideal for longer jumps km/h. The freespin is up to 114 km/h, so ideal for longer jumps
where the tire is spinning up in the air. where the tire is spinning up in the air.
</p> </p>
<p> <p>
It also comes with a seat, pretty good jump- and power pads and It also comes with a seat, pretty good jump- and power pads and
spiked pedals. Plus a sturdy, albeit oddly placed and somewhat short spiked pedals. Plus a sturdy, albeit oddly placed and somewhat short
trolley handle, as well as a sturdy kickstand and height-adjustable trolley handle, as well as a sturdy kickstand and height-adjustable
bright lights. It's waterproof, but not submersible, and best of bright lights. It's waterproof, but not submersible, and best of
all, it's super easy to work with because the device has a very all, it's super easy to work with because the device has a very
modular design. The tire can theoretically be removed with just 2 modular design. The tire can theoretically be removed with just 2
screws screws
</p> </p>
<p> <p>
While all of this is true, many problems have unfortunately arisen While all of this is true, many problems have unfortunately arisen
with this highly anticipated and hyped wheel. There were motor with this highly anticipated and hyped wheel. There were motor
problems with the first devices, which led to cut-offs and burned problems with the first devices, which led to cut-offs and burned
the motherboard. Also, the slider design is very clumsy and gets the motherboard. Also, the slider design is very clumsy and gets
harder and harder to move over time. Many S22 buyers had to wait a harder and harder to move over time. Many S22 buyers had to wait a
long time for replacement motors, such as upgrading the sliders for long time for replacement motors, such as upgrading the sliders for
€100 to €200. However, with the upgrades, it is currently the best €100 to €200. However, with the upgrades, it is currently the best
suspension unicycle on the market. (Until the Veteran Sherman S goes suspension unicycle on the market. (Until the Veteran Sherman S goes
on sale.) on sale.)
</p> </p>
</article> </article>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4"><img src="KS S22/S22shutterkode5.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/BusJump.jpg" /></div>
<div class="col-4"><img src="KS S22/S22shutterkode4.jpg" /></div> <div class="col-4"><img src="KS S22/S22shutterkode4.jpg" /></div>
</div> </div>
<table> <table>
<tr> <tr>
<td>Size</td> <td>Size</td>
<td>582L 330W 747H</td> <td>582L 330W 747H</td>
</tr> </tr>
<tr> <tr>
<td>Wheel Circumference</td> <td>Wheel Circumference</td>
<td>20 inches</td> <td>20 inches</td>
</tr> </tr>
<tr> <tr>
<td>Pedal Height</td> <td>Pedal Height</td>
<td>231+-26mm</td> <td>231+-26mm</td>
</tr> </tr>
<tr> <tr>
<td>Weight</td> <td>Weight</td>
<td>35kg</td> <td>35kg</td>
</tr> </tr>
<tr> <tr>
<td>Suspension travel</td> <td>Suspension travel</td>
<td>130mm</td> <td>130mm</td>
</tr> </tr>
<tr> <tr>
<td>Suspension Type</td> <td>Suspension Type</td>
<td>Oil Shock</td> <td>Oil Shock</td>
</tr> </tr>
<tr> <tr>
<td>Suspension Adjustments (for suspension)</td> <td>Suspension Adjustments (for suspension)</td>
<td>Rebound, compression</td> <td>Rebound, compression</td>
</tr> </tr>
<tr> <tr>
<td>Free Spin</td> <td>Free Spin</td>
<td>114kmh</td> <td>114kmh</td>
</tr> </tr>
<tr> <tr>
<td>Top speed</td> <td>Top speed</td>
<td>70kmh</td> <td>70kmh</td>
</tr> </tr>
<tr> <tr>
<td>Range at 30kmh</td> <td>Range at 30kmh</td>
<td>200km</td> <td>200km</td>
</tr> </tr>
<tr> <tr>
<td>Minimum range for heavy use</td> <td>Minimum range for heavy use</td>
<td>70km</td> <td>70km</td>
</tr> </tr>
<tr> <tr>
<td>Max climb angle</td> <td>Max climb angle</td>
<td>45°</td> <td>45°</td>
</tr> </tr>
<tr> <tr>
<td>Max. payload</td> <td>Max. payload</td>
<td>120kg</td> <td>120kg</td>
</tr> </tr>
<tr> <tr>
<td>Engine Type</td> <td>Engine Type</td>
<td>High Speed</td> <td>High Speed</td>
</tr> </tr>
<tr> <tr>
<td>Engine Power</td> <td>Engine Power</td>
<td>3300W</td> <td>3300W</td>
</tr> </tr>
<tr> <tr>
<td>Peak Power</td> <td>Peak Power</td>
<td>7500W</td> <td>7500W</td>
</tr> </tr>
<tr> <tr>
<td>Battery Size</td> <td>Battery Size</td>
<td>2220wh</td> <td>2220wh</td>
</tr> </tr>
<tr> <tr>
<td>Voltage</td> <td>Voltage</td>
<td>126V</td> <td>126V</td>
</tr> </tr>
<tr> <tr>
<td>Max amps</td> <td>Max amps</td>
<td>100A</td> <td>100A</td>
</tr> </tr>
<tr> <tr>
<td>BMS</td> <td>BMS</td>
<td>Smart BMS</td> <td>Smart BMS</td>
</tr> </tr>
<tr> <tr>
<td>Battery cell type</td> <td>Battery cell type</td>
<td>LG 18600</td> <td>LG 18600</td>
</tr> </tr>
<tr> <tr>
<td>IPRating</td> <td>IPRating</td>
<td>nope</td> <td>nope</td>
</tr> </tr>
<tr> <tr>
<td>Accessories</td> <td>Accessories</td>
<td>Powerpads, Jumppads, Seat, Spiked Pedals</td> <td>Powerpads, Jumppads, Seat, Spiked Pedals</td>
</tr> </tr>
<tr> <tr>
<td>Lights</td> <td>Lights</td>
<td>8x5W adjustable headlights</td> <td>8x5W adjustable headlights</td>
</tr> </tr>
<tr> <tr>
<td>Default tires</td> <td>Default tires</td>
<td>Nobby</td> <td>Nobby</td>
</tr> </tr>
<tr> <tr>
<td>Anti spin button?</td> <td>Anti spin button?</td>
<td>under control</td> <td>under control</td>
</tr> </tr>
<tr> <tr>
<td>Display?</td> <td>Display?</td>
<td>dot matrix</td> <td>dot matrix</td>
</tr> </tr>
<tr> <tr>
<td>RGB?</td> <td>RGB?</td>
<td>Taillight</td> <td>Taillight</td>
</tr> </tr>
<tr> <tr>
<td>Pads?</td> <td>Pads?</td>
<td>All inclusive</td> <td>All inclusive</td>
</tr> </tr>
<tr> <tr>
<td>Charge outlets?</td> <td>Charge outlets?</td>
<td>nope</td> <td>nope</td>
</tr> </tr>
<tr> <tr>
<td>Charger:</td> <td>Charger:</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td>Default load time:</td> <td>Default load time:</td>
<td>3.3h</td> <td>3.3h</td>
</tr> </tr>
<tr> <tr>
<td>Max Amps:</td> <td>Max Amps:</td>
<td>10A</td> <td>10A</td>
</tr> </tr>
<tr> <tr>
<td>Fastest load time:</td> <td>Fastest load time:</td>
<td>100min</td> <td>100min</td>
</tr> </tr>
<tr> <tr>
<td>Load ports:</td> <td>Load ports:</td>
<td>2</td> <td>2</td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>

191
todo/Start.css
View file

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

308
todo/StartDE.html
View file

@ -1,154 +1,154 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="57x57" sizes="57x57"
href="favicon/apple-icon-57x57.png" href="favicon/apple-icon-57x57.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="60x60" sizes="60x60"
href="favicon/apple-icon-60x60.png" href="favicon/apple-icon-60x60.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="72x72" sizes="72x72"
href="favicon/apple-icon-72x72.png" href="favicon/apple-icon-72x72.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="76x76" sizes="76x76"
href="favicon/apple-icon-76x76.png" href="favicon/apple-icon-76x76.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="114x114" sizes="114x114"
href="favicon/apple-icon-114x114.png" href="favicon/apple-icon-114x114.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="120x120" sizes="120x120"
href="favicon/apple-icon-120x120.png" href="favicon/apple-icon-120x120.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="144x144" sizes="144x144"
href="favicon/apple-icon-144x144.png" href="favicon/apple-icon-144x144.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="152x152" sizes="152x152"
href="favicon/apple-icon-152x152.png" href="favicon/apple-icon-152x152.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
href="favicon/apple-icon-180x180.png" href="favicon/apple-icon-180x180.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="192x192" sizes="192x192"
href="favicon/android-icon-192x192.png" href="favicon/android-icon-192x192.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="32x32" sizes="32x32"
href="favicon/favicon-32x32.png" href="favicon/favicon-32x32.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="96x96" sizes="96x96"
href="favicon/favicon-96x96.png" href="favicon/favicon-96x96.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="16x16" sizes="16x16"
href="favicon/favicon-16x16.png" href="favicon/favicon-16x16.png"
/> />
<link rel="manifest" href="favicon/manifest.json" /> <link rel="manifest" href="favicon/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileColor" content="#ffffff" />
<meta <meta
name="msapplication-TileImage" name="msapplication-TileImage"
content="favicon/ms-icon-144x144.png" content="favicon/ms-icon-144x144.png"
/> />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Julian Gerhardt" /> <meta name="author" content="Julian Gerhardt" />
<meta <meta
name="keywords" name="keywords"
content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway" content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway"
/> />
<title>Start</title> <title>Start</title>
<link rel="stylesheet" href="Start.css" /> <link rel="stylesheet" href="Start.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<img id="cover" src="images/Gear3.webp" /> <img id="cover" src="images/Gear3.webp" />
<div class="centered"><h1>Bock auf was Neues?</h1></div> <div class="centered"><h1>Bock auf was Neues?</h1></div>
</div> </div>
<h1 id="gone">Bock auf was Neues?</h1> <h1 id="gone">Bock auf was Neues?</h1>
<p> <p>
Flexible - Modern - schneller als die Polizei erlaubt. Das sind moderne Flexible - Modern - schneller als die Polizei erlaubt. Das sind moderne
eletrische Einräder. eletrische Einräder.
</p> </p>
<div class="righties"><img src="images/ShermanStanding.jpg" /></div> <div class="righties"><img src="images/ShermanStanding.jpg" /></div>
<p> <p>
Von 0 auf 50kmh in 3s, 100kmh top Geschwindigkeit und 230km Reichweite Von 0 auf 50kmh in 3s, 100kmh top Geschwindigkeit und 230km Reichweite
machen aus diesen Geräten den ultimativen Sport. machen aus diesen Geräten den ultimativen Sport.
</p> </p>
<div class="righties"><img src="images/UltimativeSport.jpg" /></div> <div class="righties"><img src="images/UltimativeSport.jpg" /></div>
<p> <p>
Gleichzeitig 50° steile Wände hochfahren und MTB Trails mit leichtigkeit Gleichzeitig 50° steile Wände hochfahren und MTB Trails mit leichtigkeit
nehmen. nehmen.
</p> </p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <video width="auto" height="auto" autoplay muted loop>
<source src="videos/MTBtrailsEase.mp4" type="video/mp4" /> <source src="videos/MTBtrailsEase.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<p>Jeden Weg nutzen und nie wieder im Verkehr stecken.</p> <p>Jeden Weg nutzen und nie wieder im Verkehr stecken.</p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <video width="auto" height="auto" autoplay muted loop>
<source src="videos/traffic.mp4" type="video/mp4" /> <source src="videos/traffic.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<p>Und trotzdem leicht zu transportiren und untern Tisch zu packen.</p> <p>Und trotzdem leicht zu transportiren und untern Tisch zu packen.</p>
<div class="righties"><img src="images/KidsKS16X.jpg" /></div> <div class="righties"><img src="images/KidsKS16X.jpg" /></div>
<p>Interessiert? Dann tauche in die Welt der PEV's und EUC's ein:</p> <p>Interessiert? Dann tauche in die Welt der PEV's und EUC's ein:</p>
<a href="EUC Überblick DE.html"> <a href="EUC Überblick DE.html">
<div id="MoreButton"> <div id="MoreButton">
<p>Ich will alles darüber lesen!</p> <p>Ich will alles darüber lesen!</p>
</div> </div>
</a> </a>
<a <a
href="https://youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV" href="https://youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV"
> >
<div id="MoreButton"> <div id="MoreButton">
<p>Mir reichen Videos</p> <p>Mir reichen Videos</p>
</div> </div>
</a> </a>
<a href="StartENG.html"> <a href="StartENG.html">
<div id="MoreButton"> <div id="MoreButton">
<p>Language</p> <p>Language</p>
</div> </div>
</a> </a>
</body> </body>
</html> </html>

314
todo/StartENG.html
View file

@ -1,157 +1,157 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="57x57" sizes="57x57"
href="favicon/apple-icon-57x57.png" href="favicon/apple-icon-57x57.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="60x60" sizes="60x60"
href="favicon/apple-icon-60x60.png" href="favicon/apple-icon-60x60.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="72x72" sizes="72x72"
href="favicon/apple-icon-72x72.png" href="favicon/apple-icon-72x72.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="76x76" sizes="76x76"
href="favicon/apple-icon-76x76.png" href="favicon/apple-icon-76x76.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="114x114" sizes="114x114"
href="favicon/apple-icon-114x114.png" href="favicon/apple-icon-114x114.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="120x120" sizes="120x120"
href="favicon/apple-icon-120x120.png" href="favicon/apple-icon-120x120.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="144x144" sizes="144x144"
href="favicon/apple-icon-144x144.png" href="favicon/apple-icon-144x144.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="152x152" sizes="152x152"
href="favicon/apple-icon-152x152.png" href="favicon/apple-icon-152x152.png"
/> />
<link <link
rel="apple-touch-icon" rel="apple-touch-icon"
sizes="180x180" sizes="180x180"
href="favicon/apple-icon-180x180.png" href="favicon/apple-icon-180x180.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="192x192" sizes="192x192"
href="favicon/android-icon-192x192.png" href="favicon/android-icon-192x192.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="32x32" sizes="32x32"
href="favicon/favicon-32x32.png" href="favicon/favicon-32x32.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="96x96" sizes="96x96"
href="favicon/favicon-96x96.png" href="favicon/favicon-96x96.png"
/> />
<link <link
rel="icon" rel="icon"
type="image/png" type="image/png"
sizes="16x16" sizes="16x16"
href="favicon/favicon-16x16.png" href="favicon/favicon-16x16.png"
/> />
<link rel="manifest" href="favicon/manifest.json" /> <link rel="manifest" href="favicon/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileColor" content="#ffffff" />
<meta <meta
name="msapplication-TileImage" name="msapplication-TileImage"
content="favicon/ms-icon-144x144.png" content="favicon/ms-icon-144x144.png"
/> />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Julian Gerhardt" /> <meta name="author" content="Julian Gerhardt" />
<meta <meta
name="keywords" name="keywords"
content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway" content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway"
/> />
<title>Start</title> <title>Start</title>
<link rel="stylesheet" href="Start.css" /> <link rel="stylesheet" href="Start.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<img id="cover" src="images/Gear3.webp" /> <img id="cover" src="images/Gear3.webp" />
<div class="centered"><h1>Wanna try something new?</h1></div> <div class="centered"><h1>Wanna try something new?</h1></div>
</div> </div>
<h1 id="gone">Wanna try something new?</h1> <h1 id="gone">Wanna try something new?</h1>
<p> <p>
Flexible - Modern - Faster then law it self. These are modern electric Flexible - Modern - Faster then law it self. These are modern electric
unicycles: unicycles:
</p> </p>
<div class="righties"><img src="images/ShermanStanding.jpg" /></div> <div class="righties"><img src="images/ShermanStanding.jpg" /></div>
<p> <p>
From 0 auf 50kmh in 3s, 100kmh top speed and 230km range make these From 0 auf 50kmh in 3s, 100kmh top speed and 230km range make these
devices the ultimate sport. devices the ultimate sport.
</p> </p>
<div class="righties"><img src="images/UltimativeSport.jpg" /></div> <div class="righties"><img src="images/UltimativeSport.jpg" /></div>
<p>Meanwhile climbing 50° steep walls and taking MTB trails with ease.</p> <p>Meanwhile climbing 50° steep walls and taking MTB trails with ease.</p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <video width="auto" height="auto" autoplay muted loop>
<source src="videos/MTBtrailsEase.mp4" type="video/mp4" /> <source src="videos/MTBtrailsEase.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<p>Taking every path and never get stuck in traffic again.</p> <p>Taking every path and never get stuck in traffic again.</p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <video width="auto" height="auto" autoplay muted loop>
<source src="videos/traffic.mp4" type="video/mp4" /> <source src="videos/traffic.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<p>But still being easy to carry and store just under your desk.</p> <p>But still being easy to carry and store just under your desk.</p>
<div class="righties"><img src="images/KidsKS16X.jpg" /></div> <div class="righties"><img src="images/KidsKS16X.jpg" /></div>
<p>Interested? Then take a deep dive into PEV's and EUC's:</p> <p>Interested? Then take a deep dive into PEV's and EUC's:</p>
<a href="EUC Überblick ENG.html"> <a href="EUC Überblick ENG.html">
<div id="MoreButton"> <div id="MoreButton">
<p>I want to read everything about it!</p> <p>I want to read everything about it!</p>
</div> </div>
</a> </a>
<a <a
href="https://youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV" href="https://youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV"
> >
<div id="MoreButton"> <div id="MoreButton">
<p>Na, videos are just fine</p> <p>Na, videos are just fine</p>
</div> </div>
</a> </a>
<a href="StartDE.html"> <a href="StartDE.html">
<div id="MoreButton"> <div id="MoreButton">
<p>Sprache</p> <p>Sprache</p>
</div> </div>
</a> </a>
</body> </body>
</html> </html>