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

Consolidate and upload changes from recent work

Browse source
This commit is contained in:
aronmal 2023-12-08 17:52:06 +01:00
parent 05a69bf274
commit da2e46aab2
Signed by: aronmal
GPG key ID: 816B7707426FC612
20 changed files with 1844 additions and 1566 deletions
Download patch file Download diff file Expand all files Collapse all files

200
src/components/Asset.tsx Normal file
View file

@ -0,0 +1,200 @@
import {
faMagnifyingGlassMinus,
faMagnifyingGlassPlus,
faSlidersSimple,
faVolume,
faVolumeSlash,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import {
Match,
Setter,
Show,
Switch,
createEffect,
createSignal,
} from "solid-js";
import { FontAwesomeIcon } from "./FontAwesomeIcon";
interface Asset {
src: string;
}
function AssetHandler() {
const [moving, setMoving] = createSignal(false);
const [active, setActive] = createSignal("");
const [zoomLevel, setZoomLevel] = createSignal(0);
const zoomAmount = () => 1 + zoomLevel() * 0.5;
const [x, setX] = createSignal(0);
const [y, setY] = createSignal(0);
function FullscreenView() {
const [muted, setMuted] = createSignal(true);
const [controlls, setControlls] = createSignal(false);
const [clientX, setClientX] = createSignal(0);
const [clientY, setClientY] = createSignal(0);
const [ref, setRef] = createSignal<HTMLElement | null>(null);
const handleMouseMove = (event: MouseEvent) => {
const { clientX, clientY } = event;
setClientX(clientX);
setClientY(clientY);
};
createEffect(() => {
const thisRef = ref();
if (!thisRef) return;
const rectA = thisRef.getBoundingClientRect();
const origSizeW = rectA.width / zoomAmount();
const origSizeH = rectA.height / zoomAmount();
const rectW = wrapperRef.getBoundingClientRect();
const hori = rectW.width - origSizeW + origSizeW / zoomAmount();
const verti = rectW.height - origSizeH + origSizeH / zoomAmount();
const xP = (clientX() - hori / 2) / (rectW.width - hori);
const yP = (clientY() - verti / 2) / (rectW.height - verti);
setX((xP > 0 ? (xP < 1 ? xP : 1) : 0) * origSizeW);
setY((yP > 0 ? (yP < 1 ? yP : 1) : 0) * origSizeH);
const moving =
clientX() > (rectW.width - origSizeW) / 2 &&
clientX() < rectW.width - (rectW.width - origSizeW) / 2 &&
clientY() > (rectW.height - origSizeH) / 2 &&
clientY() < rectW.height - (rectW.height - origSizeH) / 2;
setMoving(moving);
});
let wrapperRef: HTMLDivElement;
createEffect(() => {
if (active()) return;
setZoomLevel(0);
setMuted(true);
setControlls(false);
});
return (
<div
ref={wrapperRef!}
onMouseMove={handleMouseMove}
classList={{ "fullscreen-asset": true, active: !!active() }}
>
<Asset
src={active()}
volume={!muted()}
controlls={controlls()}
setRef={setRef}
/>
<div class="controlls">
<button onClick={() => setActive("")} title="Close">
<FontAwesomeIcon icon={faXmark} />
</button>
<Show when={active().startsWith("/videos")}>
<button
onClick={() => setMuted((e) => !e)}
style={{ "border-style": controlls() ? "dashed" : "" }}
title={muted() ? "Unmute" : "Mute"}
>
<FontAwesomeIcon icon={!muted() ? faVolume : faVolumeSlash} />
</button>
<button
onClick={() => setControlls((e) => !e)}
style={{ "border-style": controlls() ? "inset" : "" }}
title="Show controlls"
>
<FontAwesomeIcon icon={faSlidersSimple} />
</button>
</Show>
<button
onClick={() => setZoomLevel((e) => e + 1)}
disabled={zoomLevel() === 4}
title="Zoom +"
>
<FontAwesomeIcon icon={faMagnifyingGlassPlus} />
</button>
<button
onClick={() => setZoomLevel((e) => e - 1)}
disabled={zoomLevel() === 0}
title="Zoom -"
>
<FontAwesomeIcon icon={faMagnifyingGlassMinus} />
</button>
</div>
</div>
);
}
function Asset(
props: Asset & {
class?: string;
volume?: boolean;
controlls?: boolean;
setRef?: Setter<HTMLElement | null>;
},
) {
let imgRef: HTMLImageElement;
let videoRef: HTMLVideoElement;
const shouldZoom = () => active() === props.src && !!zoomLevel();
return (
<Switch>
<Match when={props.src.startsWith("/images")}>
<img
ref={imgRef!}
style={
shouldZoom()
? {
"--zoom": zoomAmount(),
"--x": x() + "px",
"--y": y() + "px",
}
: {}
}
onMouseEnter={() => props.setRef && props.setRef(imgRef)}
classList={{
[props.class ?? ""]: !!props.class,
zoomed: shouldZoom(),
move: moving(),
}}
onClick={() => setActive(props.src)}
src={props.src}
alt={props.src}
/>
</Match>
<Match when={props.src.startsWith("/videos")}>
<video
ref={videoRef!}
onMouseEnter={() => props.setRef && props.setRef(videoRef)}
style={
shouldZoom()
? {
"--zoom": zoomAmount(),
"--x": x() + "px",
"--y": y() + "px",
}
: {}
}
classList={{
[props.class ?? ""]: !!props.class,
zoomed: shouldZoom(),
move: moving(),
active: !props.setRef && active() === props.src,
}}
onClick={() => setActive(props.src)}
width="auto"
height="auto"
autoplay
muted={!props.volume}
loop
controls={props.controlls}
>
<source src={props.src} type="video/mp4" />
</video>
</Match>
</Switch>
);
}
return { FullscreenView, Asset };
}
export default AssetHandler;

20
src/components/DeviceTile.tsx
View file

@ -4,17 +4,15 @@ import { A } from "solid-start";
function DeviceTile(props: { href?: string; name: string; src: string }) {
return (
<A href={props.href ?? "/soon"}>
<div class="raster">
<h3>{props.name}</h3>
<Show when={props.src.startsWith("/images")}>
<img src={props.src} alt={props.name} />
</Show>
<Show when={props.src.startsWith("/videos")}>
<video width="auto" height="auto" autoplay muted loop>
<source src={props.src} type="video/mp4" />
</video>
</Show>
</div>
<h3>{props.name}</h3>
<Show when={props.src.startsWith("/images")}>
<img src={props.src} alt={props.name} />
</Show>
<Show when={props.src.startsWith("/videos")}>
<video width="auto" height="auto" autoplay muted loop>
<source src={props.src} type="video/mp4" />
</video>
</Show>
</A>
);
}

2
src/components/Reference.tsx
View file

@ -43,7 +43,7 @@ function R(props: {
target={type() === "external" ? "_blank" : ""}
rel={type() === "external" ? "noreferrer noopener" : ""}
id={props.id}
class={props.class}
classList={{ reference: true, [props.class ?? ""]: !!props.class }}
>
<Show when={type() === "id"}>
<FontAwesomeIcon class="left" icon={types["id"]} />

19
src/components/de/Navbar.tsx
View file

@ -1,6 +1,8 @@
import {
faBars,
faBookOpen,
faCircleHalfStroke,
faGavel,
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
@ -75,7 +77,7 @@ function Navbar() {
<A href="/de/overview#historie">Historie</A>
</li>
<li>
<A href="/de/overview#geräte">Geräte Liste</A>
<A href="/de/overview#geraete">Geräte Liste</A>
</li>
</ol>
@ -83,6 +85,10 @@ function Navbar() {
<FontAwesomeIcon icon={faBookOpen} /> Hersteller
</A>
<A href="/de/imprint">
<FontAwesomeIcon icon={faGavel} /> Impressum
</A>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
@ -99,14 +105,9 @@ function Navbar() {
</button>
</div>
<div
id="sidenavbar"
style={{ visibility: menu() ? "hidden" : "visible" }}
>
<button onClick={() => navigate(-1)}>Zurück</button>
<button onClick={() => navigate("/de/overview")}>Start</button>
<button onClick={() => setMenu(true)}>Menu</button>
</div>
<button class="menu" title="Menu" onClick={() => setMenu(true)}>
<FontAwesomeIcon icon={faBars} />
</button>
</>
);
}

19
src/components/en/Navbar.tsx
View file

@ -1,6 +1,8 @@
import {
faBars,
faBookOpen,
faCircleHalfStroke,
faGavel,
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
@ -75,7 +77,7 @@ function Navbar() {
<A href="/en/overview#historie">History</A>
</li>
<li>
<A href="/en/overview#geräte">Device list</A>
<A href="/en/overview#geraete">Device list</A>
</li>
</ol>
@ -83,6 +85,10 @@ function Navbar() {
<FontAwesomeIcon icon={faBookOpen} /> Manufacturers
</A>
<A href="/de/imprint">
<FontAwesomeIcon icon={faGavel} /> Legal Notice (DE)
</A>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
@ -99,14 +105,9 @@ function Navbar() {
</button>
</div>
<div
id="sidenavbar"
style={{ visibility: menu() ? "hidden" : "visible" }}
>
<button onClick={() => navigate(-1)}>Back</button>
<button onClick={() => navigate("/en/overview")}>Start</button>
<button onClick={() => setMenu(true)}>Menu</button>
</div>
<button class="menu" title="Menu" onClick={() => setMenu(true)}>
<FontAwesomeIcon icon={faBars} />
</button>
</>
);
}

3
src/root.tsx
View file

@ -12,6 +12,7 @@ import {
Title,
useLocation,
} from "solid-start";
import "~/styles/global.scss";
export default function Root() {
const location = useLocation();
@ -100,7 +101,7 @@ export default function Root() {
<Meta name="author" content="Julian Gerhardt" />
<Meta
name="keywords"
content="Elektrische einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway"
content="Elektrische Einräder, EUC, Monowheels, Kingsong, Inmotion, Gotway"
/>
<Title>SolidStart - Bare</Title>
</Head>

413
src/routes/de/KSS22.tsx
View file

@ -1,225 +1,220 @@
import { Body, Title, useNavigate } from "solid-start";
import { lightMode } from "~/components/en/Navbar";
import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/devices.scss";
function KSS22() {
const navigate = useNavigate();
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="devices" classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title>
<FullscreenView />
<Navbar />
<div id="sidenavbar">
<button onClick={() => navigate(-1)}>Zurück</button>
<button onClick={() => navigate("/de/overview")}>Start</button>
</div>
<article>
<div>
<h2>Kingsong S22</h2>
<div class="righties">
<Asset src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<div class="row">
<div class="col-4">
<img src="/images/KSS22/S22shutterkode2.jpg" />
<p>
Das Kingsong S22, früher S20, ist ein klar Offroad und Trail
orientiertes Einrad. Es hat unter anderem 130 mm 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>
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>
</div>
<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 130 mm 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>
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 class="grid">
<Asset src="/images/KSS22/S22shutterkode5.jpg" />
<Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
<Asset src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div>
<div class="row">
<div class="col-4">
<img src="/images/KSS22/S22shutterkode5.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/BusJump.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div>
<table>
<thead>
<tr>
<th>Eigenschaft</th>
<th>Wert</th>
</tr>
</thead>
<tbody>
<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 &plusmn; 26 mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>35 kg</td>
</tr>
<tr>
<td>Suspension travel (bei Federung)</td>
<td>130 mm</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>114 km/h</td>
</tr>
<tr>
<td>Top speed</td>
<td>70 km/h</td>
</tr>
<tr>
<td>Reichweite bei 30 km/h</td>
<td>200 km</td>
</tr>
<tr>
<td>Minimale Reichweite bei starker Nutzung</td>
<td>70 km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. Zuladung</td>
<td>120 kg</td>
</tr>
<table>
<tbody>
<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 &plusmn; 26 mm</td>
</tr>
<tr>
<td>Gewicht</td>
<td>35 kg</td>
</tr>
<tr>
<td>Suspension travel (bei Federung)</td>
<td>130 mm</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>114 km/h</td>
</tr>
<tr>
<td>Top speed</td>
<td>70 km/h</td>
</tr>
<tr>
<td>Reichweite bei 30 km/h</td>
<td>200 km</td>
</tr>
<tr>
<td>Minimale Reichweite bei starker Nutzung</td>
<td>70 km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. Zuladung</td>
<td>120 kg</td>
</tr>
<tr>
<td>Motor Typ</td>
<td>High Speed</td>
</tr>
<tr>
<td>Motor Leistung</td>
<td>3.300 W</td>
</tr>
<tr>
<td>Peak Leistung</td>
<td>7.500 W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2.220 Wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126 V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100 A</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>Motor Typ</td>
<td>High Speed</td>
</tr>
<tr>
<td>Motor Leistung</td>
<td>3.300 W</td>
</tr>
<tr>
<td>Peak Leistung</td>
<td>7.500 W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2.220 Wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126 V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100 A</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>8 x 5 W Verstellbare Scheinwerfer</td>
</tr>
<tr>
<td>Standard Reifen</td>
<td>Knobby (Noppenreifen)</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 />
</tr>
<tr>
<td>Standard Ladezeit:</td>
<td>3,3 h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10 A</td>
</tr>
<tr>
<td>Schnellste Ladezeit:</td>
<td>100 Minuten</td>
</tr>
<tr>
<td>Ladeports:</td>
<td>2</td>
</tr>
</tbody>
</table>
<tr>
<td>Accessoires</td>
<td>Powerpads, Jumppads, Seat, Spiked-Pedals</td>
</tr>
<tr>
<td>Lichter</td>
<td>8 x 5 W Verstellbare Scheinwerfer</td>
</tr>
<tr>
<td>Standard Reifen</td>
<td>Knobby (Noppenreifen)</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 />
</tr>
<tr>
<td>Standard Ladezeit:</td>
<td>3,3 h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10 A</td>
</tr>
<tr>
<td>Schnellste Ladezeit:</td>
<td>100 Minuten</td>
</tr>
<tr>
<td>Ladeports:</td>
<td>2</td>
</tr>
</tbody>
</table>
</article>
</Body>
);
}

49
src/routes/de/imprint.tsx Normal file
View file

@ -0,0 +1,49 @@
import { Body, Title } from "solid-start";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function imprint() {
return (
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Impressum</Title>
<Navbar />
<article>
<h1>Impressum</h1>
<h2>Verantwortlich für den Inhalt gemäß § 18 Abs. 1 MStV:</h2>
<p>Julian Gerhardt</p>
<h2>Technischer Ansprechpartner:</h2>
<p>
Aron Malcher
<br />
<br />
Unlimited Development
<br />
<br />
Brunnenstr. 12
<br />
48531 Nordhorn
<br />
Deutschland
<br />
<br />
E-Mail:{" "}
<a href="mailto:aron@unlimited-dev.de">aron@unlimited-dev.de</a>
</p>
<h2>Hinweis:</h2>
<p>
Die redaktionelle Verantwortung für die Inhalte der Webseite liegt bei
Julian Gerhardt. Technische Fragen und Anfragen richten Sie bitte an
den technischen Ansprechpartner von Unlimited Development, welche als
Hosting- und IT-Service agiert, jedoch nicht für den redaktionellen
Inhalt verantwortlich ist.
</p>
</article>
</Body>
);
}
export default imprint;

30
src/routes/de/index.tsx
View file

@ -1,15 +1,19 @@
import { faYoutube } from "@fortawesome/free-brands-svg-icons";
import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons";
import { A, Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import { lightMode } from "~/components/de/Navbar";
import "~/styles/start.scss";
function Introduction() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="start" classList={{ "light-mode": lightMode() }}>
<Title>Einführung</Title>
<FullscreenView />
<div class="container">
<img id="cover" src="/images/Gear3.webp" />
<div class="centered">
@ -23,39 +27,25 @@ function Introduction() {
Flexible - Modern - schneller als die Polizei erlaubt. Das sind moderne
eletrische Einräder.
</p>
<div class="righties">
<img src="/images/ShermanStanding.jpg" />
</div>
<Asset src="/images/ShermanStanding.jpg" />
<p>
Von 0 auf 50 km/h in 3 s, 100 km/h top Geschwindigkeit und 230 km
Reichweite machen aus diesen Geräten den ultimativen Sport.
</p>
<div class="righties">
<img src="/images/UltimativeSport.jpg" />
</div>
<Asset src="/images/UltimativeSport.jpg" />
<p>
Gleichzeitig 50° steile Wände hochfahren und MTB Trails mit leichtigkeit
nehmen.
</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/MTBtrailsEase.mp4" type="video/mp4" />
</video>
</div>
<Asset src="/videos/MTBtrailsEase.mp4" />
<p>Jeden Weg nutzen und nie wieder im Verkehr stecken.</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/traffic.mp4" type="video/mp4" />
</video>
</div>
<Asset src="/videos/traffic.mp4" />
<p>Und trotzdem leicht zu transportiren und untern Tisch zu packen.</p>
<div class="righties">
<img src="/images/KidsKS16X.jpg" />
</div>
<Asset src="/images/KidsKS16X.jpg" />
<p>Interessiert? Dann tauche in die Welt der PEV's und EUC's ein:</p>

60
src/routes/de/manufacturers.tsx
View file

@ -1,18 +1,22 @@
import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function Manufacturers() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Hersteller</Title>
<FullscreenView />
<Navbar />
<article>
{/*
<!--hersteller-->
*/}
<div class="row">
<div>
<h3 id="manufacturers">Erklärung und Geschichte der Produzenten</h3>
<p>
Es gibt/gab viele Hersteller von elektrischen Einrädern, hier werden
@ -24,10 +28,15 @@ function Manufacturers() {
</p>
<h3 id="ninebot">
Ninebot <img class="logos" src="/images/ninebotLogo.jpg" />
Ninebot <img src="/images/ninebotLogo.jpg" />
</h3>
<img class="righties" src="/images/NineBot.webp" />
<img class="lefties" src="/images/NinebotZ10goood.webp" />
<div class="righties">
<Asset src="/images/NineBot.webp" />
</div>
<div class="lefties">
<Asset src="/images/NinebotZ10goood.webp" />
</div>
<p>
Ninebot ist für die Meisten bekannt als Scooter Hersteller, manche
kenne auch vielleicht deren elektrische Schuhe oder die Segway
@ -42,10 +51,14 @@ function Manufacturers() {
</p>
<h3 id="inmotion">
Inmotion <img class="logos" src="/images/inmotionLogo.png" />
Inmotion <img src="/images/inmotionLogo.png" />
</h3>
<img class="righties" src="/images/InmotionLineup.jpg" />
<img class="lefties" src="/images/V11 3.webp" />
<div class="righties">
<Asset src="/images/InmotionLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/V11 3.webp" />
</div>
<p>
Inmotion ist der zweitgrößte Hersteller der hier gelisteten.
Ebenfalls groß im standard-Scooter Segment, hat Inmotion aber auch
@ -65,10 +78,14 @@ function Manufacturers() {
</p>
<h3 id="kingsong">
Kingsong <img class="logos" src="/images/kingsongLogo.png" />
Kingsong <img src="/images/kingsongLogo.png" />
</h3>
<img class="righties" src="/images/KidsKS16X.jpg" />
<img class="lefties" src="/images/kingsong2.jpg" />
<div class="righties">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<div class="lefties">
<Asset src="/images/kingsong2.jpg" />
</div>
<p>
Kingsong ist sehr ähnlich zu Inmotion, nur kleiner und ohne den
großen Scooter und E-Bike Markt dahinter. Qualität und Design waren
@ -85,10 +102,14 @@ function Manufacturers() {
</p>
<h3 id="begode">
Gotway/Begode <img class="logos" src="/images/BEGODElogo.jpg" />
Gotway/Begode <img src="/images/BEGODElogo.jpg" />
</h3>
<img class="righties" src="/images/BegodeLineup.jpg" />
<img class="lefties" src="/images/BegodeMemeBurn.jpg" />
<div class="righties">
<Asset src="/images/BegodeLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/BegodeMemeBurn.jpg" />
</div>
<p>
Gotway, oder wie sie sich heute nennen, Begode, ist schwer zu
beschreiben und einzuordnen. Viele Meinungen und Kontroversen. Die
@ -136,11 +157,14 @@ function Manufacturers() {
</p>
<h3 id="veteran">
Leaperkim/Veteran{" "}
<img class="logos" src="/images/veteranLogo.png" />
Leaperkim/Veteran <img src="/images/veteranLogo.png" />
</h3>
<img class="righties" src="/images/Shermangrey.jpg" />
<img class="lefties" src="/images/abrahams.jpg" />
<div class="righties">
<Asset src="/images/Shermangrey.jpg" />
</div>
<div class="lefties">
<Asset src="/images/abrahams.jpg" />
</div>
<p>
Veteran ist für viele der Liebling. Bestehend aus Ex Gotway
Ingenieuren und Mitarbeitern, die mit den Entscheidungen von Gotway

517
src/routes/de/overview.tsx
View file

@ -1,13 +1,16 @@
import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss";
function overview() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Einführung EUCs</Title>
<FullscreenView />
<Navbar />
<header>
@ -16,7 +19,7 @@ function overview() {
{/* <!--Intro--> */}
<article>
<div class="row">
<div>
<h2>Bevor Sie lesen:</h2>
<p>Hier sind ein paar Dinge, bevor Sie anfangen zu lesen.</p>
@ -48,13 +51,15 @@ function overview() {
</div>
{/* <!--was sind eucs--> */}
<div class="row">
<div>
<h2>Was sind EUCs</h2>
<div class="righties">
<img src="/images/what is euc.jpg" />
<Asset src="/images/what is euc.jpg" />
</div>
<div class="lefties">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<img class="lefties" src="/images/KidsKS16X.jpg" />
<p>
EUC steht für <b>E</b>lectric<b>U</b>ni<b>C</b>ycle, zu Deutsch
elektrisches Einrad. Im einfachsten Sinne ist es ein Akku
@ -70,21 +75,14 @@ function overview() {
</div>
{/* <!--warum?--> */}
<div class="row">
<div>
<h2 id="why">Warum Einrad fahren?</h2>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/whyS22.mp4" type="video/mp4" />
</video>
<Asset src="/videos/whyS22.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source
src="/videos/SkippinTrafficDanceWW.mp4"
type="video/mp4"
/>
</video>
<Asset src="/videos/SkippinTrafficDanceWW.mp4" />
</div>
<p>
@ -168,14 +166,14 @@ function overview() {
</div>
{/* <!--funktion--> */}
<div class="row">
<div>
<h2 id="funktion">Technische Funktionsweise</h2>
<div class="righties">
<img src="/images/Funktionsblld.webp" />
<Asset src="/images/Funktionsblld.webp" />
</div>
<div class="lefties">
<img src="/images/realBattery.jpg" />
<Asset src="/images/realBattery.jpg" />
</div>
<p>
@ -231,10 +229,10 @@ function overview() {
</p>
<div class="righties">
<img src="/images/MoBo.jpg" />
<Asset src="/images/MoBo.jpg" />
</div>
<div class="lefties">
<img src="/images/realMoBo1.PNG" />
<Asset src="/images/realMoBo1.PNG" />
</div>
<p>
Das <b>Motherboard</b> besteht unter anderem aus dem Stromeingang
@ -273,10 +271,10 @@ function overview() {
einstellen.
</p>
<div class="righties">
<img src="/images/Motor.jpeg" />
<Asset src="/images/Motor.jpeg" />
</div>
<div class="lefties">
<img src="/images/realMotor.png" />
<Asset src="/images/realMotor.png" />
</div>
<p>
Der <b id="motor">Motor</b> eines Einrades ist ein 3 Phasen Hub
@ -330,179 +328,184 @@ function overview() {
</div>
{/* <!--begriffe--> */}
<div class="row">
<div>
<h3 id="begriffe">Begriffs- und Spezifikationserklärungen</h3>
<div class="col-6">
<p>
<b id="tiltback">Tilt-back</b>: Die Pedale des Geräts neigen sich
nach hinten, um den Fahrer abzubremsen. Wird bei niedrigem Akku
stand oder zu hoher Beanspruchung benutzt, um die Elektronik zu
schützen.
</p>
<p>
<b>Pedal Dip</b>: Die Pedale geben nach, das Gerät kann die
gefragte Leistung nicht aufrechterhalten und die Pedale neigen
sich schlagartig nach vorne (Oder nach hinten beim starken
Bremsen). In den meisten Fällen kommen die Pedale aber sofort
wieder hoch, sodass die Fahrt ungestört weiter gehen kann.
</p>
<p>
<b>Pedal-angle</b>: Der Winkel, in dem die Pedale zum Gerät
stehen, wenn man sie von vorne betrachtet. Ein steilerer Winkel
sorgt für mehr Halt in Kurven, kann aber auch unangenehm werden
für längere Fahrten.
</p>
<p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spitzen auf den Pedalen,
die Schuhen mehr Halt geben. Ähnlich zu Mountainbike Pedalen, sind
es meist einschraubbare spitze Metallstifte, die sich etwas in den
Schuh bohren, um versehentliches abrutschen zu vermeiden. Wird
heute statt Schleifpapier genommen, da es auch bei Nässe und
Schlamm guten halt bietet.{" "}
<R href="https://youtu.be/aWU9lZAfKXM">Beispiel</R>
</p>
<div class="hidden">
<img src="/images/SpikedPedals.jpeg" />
</div>
<p class="imghover">
<b id="pads">Pads</b>: aus Plastik oder Schaumstoff bestehende
Teile die seitlich am Gerät montiert werden, meist gedruckt aus
TPU und PLA und befestigt mit großflächigem starkem Klettband. Sie
sind zur besseren Kontrolle des Gerätes, vor allem für schwere und
schnelle Einräder wichtig. Sie werden in 2 Typen aufgeteilt, wobei
viele beides zusammen kombinieren.{" "}
<R href="https://youtu.be/mI8IDQhXSi8">Beispiel</R>
</p>
<div class="hidden">
<img src="/images/Pads.jpg" />
</div>
<p>
<b>Power Pads</b>: haben Kontakt an den Waden und dem
Schienenbein, dienen zum besseren beschleunigen und bremsen.
Essenziell für schwere Geräte mit hohen pedalen.
</p>
<p>
<b>Jump Pads</b>: haben Kontakt mit dem Fuß und der Verse, dienen
zum Springen und zur Sicherheit. Im Falle eines unerwarteten
Buckels in der Straße halten sie den Fuß fest, sodass man nicht
vom Gerät fällt. Allerdings können sie im Falle eines Crashes
hinderlich sein, da sie ein schnelles Absteigen erschweren.
</p>
<p>
<b>Wobbles</b>: beschreibt das unbeabsichtigte Wackeln des Geräts
bei höherer Geschwindigkeit. Mehr dazu <R href="#wobbles">hier</R>
</p>
</div>
<div class="col-6">
<p class="imghover">
<b id="trolley">Trolley Handle</b>: ein ausfahrbarer Griff zum
Schieben des Gerätes, ähnlich wie bei einem Koffer.
</p>
<div class="hidden">
<img src="/images/KidsKS16X.jpg" />
</div>
<p>
<b>Kill-Switch</b>: ein Knopf unterm Griff, der den Motor
abschaltet. Sorgt beim Anheben dafür, das der Motor nicht
hochdreht.
</p>
<p>
<b>Cut-off /Cut-out</b>: Das Plötzliche abschalten des Gerätes
während der Fahrt, siehe Kapitel <R href="#cutout">Cut-out</R>.
</p>
<p>
<b>HS Motor</b>: High Speed Motor, siehe Kapitel{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>HT Motor</b>: High Torque Motor, siehe Kapitel{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>W</b>: Watt, Leistungsangabe, zeigt wie viel Leistung das Gerät
dauerhaft halten kann. 3.000 W entsprechen 4 PS (ein E-Bike hat
maximal 250 W). Nicht zu verwechseln mit
</p>
<p>
<b>Peak Watt</b>: Maximale Leistung, die das Gerät für sehr kurze
Zeit erreichen kann.
</p>
<p>
<b id="wh">Wh</b>: Wattstunden, Speicher Angabe, zeigt wie viel
Energie der <R href="#akku">Akku</R> speichern kann. 3.000 Wh
heißt, dass der Akku 3.000 W über eine Stunde lang geben könnte,
oder 1.500 W über 2 Stunden etc.
</p>
<p>
<b>BMS</b>: steht für Battery Managment System, hier weiter{" "}
<R href="#BMS">erklärt</R>
</p>
<p>
<b>Voltage sag</b>: Spannungsabfall, der Akku verliert kurzzeitig
bei hoher Beanspruchung an Spannung, was bei gleicher Leistung die
fließenden Ampere erhöht.
</p>
<p>
<b>Freespin</b>: Maximale Dreh Geschwindigkeit, die der Motor
erreichen kann, wenn man das Gerät anhebt. Minus 20 km/h rechnen,
um ungefähr die erreichbare top Geschwindigkeit zu bekommen.
</p>
<p>
<b>16 inch</b>: beschreibt die Reifen Größe, in dem Fall 16 Zoll
(40 cm) Durchmesser. Kleine Durchmesser sind wendig und haben ein
schnelles Ansprechverhalten, große Durchmesser (bis 24 Zoll, 60
cm) fühlen sich schwer und träge an, sind aber erheblich stabiler
auf Geschwindigkeit.
</p>
<div class="table-half">
<div>
<p>
<b>Charging Amps</b>: Die maximalen Ampere, mit denen das Gerät
laden kann. Die meisten neuen Geräte laden mit maximal 10
Ampere, also 10 A * 126 V = 1.260 Watt. Die Ladezeit errechnet
man so:
<b id="tiltback">Tilt-back</b>: Die Pedale des Geräts neigen
sich nach hinten, um den Fahrer abzubremsen. Wird bei niedrigem
Akku stand oder zu hoher Beanspruchung benutzt, um die
Elektronik zu schützen.
</p>
<p>
<b>Pedal Dip</b>: Die Pedale geben nach, das Gerät kann die
gefragte Leistung nicht aufrechterhalten und die Pedale neigen
sich schlagartig nach vorne (Oder nach hinten beim starken
Bremsen). In den meisten Fällen kommen die Pedale aber sofort
wieder hoch, sodass die Fahrt ungestört weiter gehen kann.
</p>
<p>
<b>Pedal-angle</b>: Der Winkel, in dem die Pedale zum Gerät
stehen, wenn man sie von vorne betrachtet. Ein steilerer Winkel
sorgt für mehr Halt in Kurven, kann aber auch unangenehm werden
für längere Fahrten.
</p>
<p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spitzen auf den
Pedalen, die Schuhen mehr Halt geben. Ähnlich zu Mountainbike
Pedalen, sind es meist einschraubbare spitze Metallstifte, die
sich etwas in den Schuh bohren, um versehentliches abrutschen zu
vermeiden. Wird heute statt Schleifpapier genommen, da es auch
bei Nässe und Schlamm guten halt bietet.{" "}
<R href="https://youtu.be/aWU9lZAfKXM">Beispiel</R>
</p>
<div class="hidden">
<Asset src="/images/SpikedPedals.jpeg" />
</div>
<p class="imghover">
<b id="pads">Pads</b>: aus Plastik oder Schaumstoff bestehende
Teile die seitlich am Gerät montiert werden, meist gedruckt aus
TPU und PLA und befestigt mit großflächigem starkem Klettband.
Sie sind zur besseren Kontrolle des Gerätes, vor allem für
schwere und schnelle Einräder wichtig. Sie werden in 2 Typen
aufgeteilt, wobei viele beides zusammen kombinieren.{" "}
<R href="https://youtu.be/mI8IDQhXSi8">Beispiel</R>
</p>
<div class="hidden">
<Asset src="/images/Pads.jpg" />
</div>
<p>
<b>Power Pads</b>: haben Kontakt an den Waden und dem
Schienenbein, dienen zum besseren beschleunigen und bremsen.
Essenziell für schwere Geräte mit hohen pedalen.
</p>
<p>
<b>Jump Pads</b>: haben Kontakt mit dem Fuß und der Verse,
dienen zum Springen und zur Sicherheit. Im Falle eines
unerwarteten Buckels in der Straße halten sie den Fuß fest,
sodass man nicht vom Gerät fällt. Allerdings können sie im Falle
eines Crashes hinderlich sein, da sie ein schnelles Absteigen
erschweren.
</p>
<p>
<b>Wobbles</b>: beschreibt das unbeabsichtigte Wackeln des
Geräts bei höherer Geschwindigkeit. Mehr dazu{" "}
<R href="#wobbles">hier</R>
</p>
</div>
<div>
<p class="imghover">
<b id="trolley">Trolley Handle</b>: ein ausfahrbarer Griff zum
Schieben des Gerätes, ähnlich wie bei einem Koffer.
</p>
<div class="hidden">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<p>
<b>Kill-Switch</b>: ein Knopf unterm Griff, der den Motor
abschaltet. Sorgt beim Anheben dafür, das der Motor nicht
hochdreht.
</p>
<table style={{ width: "100%" }}>
<tbody>
<tr>
<td>Kapazität</td>
<td>&divide; (</td>
<td>Volt</td>
<td>&times;</td>
<td>ladende Ampere</td>
<td>) =</td>
<td>Ladezeit</td>
</tr>
<tr>
<td>3.300 Wh</td>
<td>&divide; (</td>
<td>126 V</td>
<td>&times;</td>
<td>10 A</td>
<td>) =</td>
<td>2,6 h</td>
</tr>
</tbody>
</table>
<p>
<b>Cut-off /Cut-out</b>: Das Plötzliche abschalten des Gerätes
während der Fahrt, siehe Kapitel <R href="#cutout">Cut-out</R>.
</p>
<p>
<b>HS Motor</b>: High Speed Motor, siehe Kapitel{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>HT Motor</b>: High Torque Motor, siehe Kapitel{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>W</b>: Watt, Leistungsangabe, zeigt wie viel Leistung das
Gerät dauerhaft halten kann. 3.000 W entsprechen 4 PS (ein
E-Bike hat maximal 250 W). Nicht zu verwechseln mit
</p>
<p>
<b>Peak Watt</b>: Maximale Leistung, die das Gerät für sehr
kurze Zeit erreichen kann.
</p>
<p>
<b id="wh">Wh</b>: Wattstunden, Speicher Angabe, zeigt wie viel
Energie der <R href="#akku">Akku</R> speichern kann. 3.000 Wh
heißt, dass der Akku 3.000 W über eine Stunde lang geben könnte,
oder 1.500 W über 2 Stunden etc.
</p>
<p>
<b>BMS</b>: steht für Battery Managment System, hier weiter{" "}
<R href="#BMS">erklärt</R>
</p>
<p>
<b>Voltage sag</b>: Spannungsabfall, der Akku verliert
kurzzeitig bei hoher Beanspruchung an Spannung, was bei gleicher
Leistung die fließenden Ampere erhöht.
</p>
<p>
<b>Freespin</b>: Maximale Dreh Geschwindigkeit, die der Motor
erreichen kann, wenn man das Gerät anhebt. Minus 20 km/h
rechnen, um ungefähr die erreichbare top Geschwindigkeit zu
bekommen.
</p>
<p>
<b>16 inch</b>: beschreibt die Reifen Größe, in dem Fall 16 Zoll
(40 cm) Durchmesser. Kleine Durchmesser sind wendig und haben
ein schnelles Ansprechverhalten, große Durchmesser (bis 24 Zoll,
60 cm) fühlen sich schwer und träge an, sind aber erheblich
stabiler auf Geschwindigkeit.
</p>
<div>
<p>
<b>Charging Amps</b>: Die maximalen Ampere, mit denen das
Gerät laden kann. Die meisten neuen Geräte laden mit maximal
10 Ampere, also 10 A * 126 V = 1.260 Watt. Die Ladezeit
errechnet man so:
</p>
<table style={{ width: "100%" }}>
<tbody>
<tr>
<td>Kapazität</td>
<td>&divide; (</td>
<td>Volt</td>
<td>&times;</td>
<td>ladende Ampere</td>
<td>) =</td>
<td>Ladezeit</td>
</tr>
<tr>
<td>3.300 Wh</td>
<td>&divide; (</td>
<td>126 V</td>
<td>&times;</td>
<td>10 A</td>
<td>) =</td>
<td>2,6 h</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
{/* <!--sicherheit--> */}
<div class="row">
<div>
<h2 id="sicherheit">Sicherheit</h2>
<p>
Die wohl zweit häufigste Frage ist meist, ob man darauf denn nicht
@ -516,13 +519,13 @@ function overview() {
</div>
{/* <!--ausrüstung--> */}
<div class="row">
<div>
<h3 id="ausrüstung">Schutzausrüstung</h3>
<div class="righties">
<img src="/images/Gear2.jpg" />
<Asset src="/images/Gear2.jpg" />
</div>
<div class="lefties">
<img src="/images/Gear1.jpg" />
<Asset src="/images/Gear1.jpg" />
</div>
<p>
Jeder EUC-YouTuber und erfahrene Fahrer wird dir sagen, dass
@ -577,17 +580,15 @@ function overview() {
auch keinen Fahrradhelm tragen.
</p>
<div>
<img src="/images/Gear3.webp" />
<Asset src="/images/Gear3.webp" />
</div>
</div>
{/* <!--cut-offs--> */}
<div class="row">
<div>
<h3 id="cutout">Cut-offs</h3>
<div class="righties">
<video autoplay muted loop>
<source src="/videos/Cutout1.mp4" type="video/mp4" />
</video>
<Asset src="/videos/Cutout1.mp4" />
</div>
<p>
Cut-offs sind die größte Quelle der nicht eigenverantwortlichen
@ -663,7 +664,7 @@ function overview() {
</div>
{/* <!--akkusicheit--> */}
<div class="row">
<div>
<h3 id="akkuss">Brände, Akkusicherheit</h3>
<p>
Vorweg: im Gegensatz zu z.B. Hoverboards sind Einräder recht sicher
@ -676,11 +677,11 @@ function overview() {
ist die Sorge auch für andere Marken da.
</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/shortS22Fire.MP4" type="video/mp4" />
</video>
<Asset src="/videos/shortS22Fire.MP4" />
</div>
<div class="lefties">
<Asset src="/images/burned.png" />
</div>
<img class="lefties" src="/images/burned.png" />
<p>
<b>Brandursachen</b> können mehrere sein, hier ein paar Beispiele:
</p>
@ -735,21 +736,21 @@ function overview() {
</p>
<div class="righties">
<img src="/images/BMS.jpg" />
<Asset src="/images/BMS.jpg" />
</div>
<p>
<b>Akkusicherheit</b>: Dafür ist ein <b id="BMS">BMS</b> zuständig.
Ein <b>B</b>attery <b>M</b>anagement <b>S</b>ystem hat die Aufgabe,
<br />
-den Akku vor zu hohen Strömen zu schützen,
- den Akku vor zu hohen Strömen zu schützen,
<br />
-ihn nicht unter die spezifizierte Spannung entladen zu lassen,
- ihn nicht unter die spezifizierte Spannung entladen zu lassen,
<br />
-ihn auch nicht über die maximale Spannung laden zu lassen,
- ihn auch nicht über die maximale Spannung laden zu lassen,
<br />
-die Temperatur im Blick zu halten und
<br />
-im Falle eines Kurzschlusses sich vom restlichen System zu trennen.
- die Temperatur im Blick zu halten und
<br />- im Falle eines Kurzschlusses sich vom restlichen System zu
trennen.
</p>
<p>
Bessere BMSs, auch smart BMS genannt, können auch aktiv die Zellen
@ -770,17 +771,13 @@ function overview() {
</div>
{/* <!--fahrweise--> */}
<div class="row">
<div>
<h3 id="fahrweise">Fahrweise</h3>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC4bad.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC4bad.mp4" />
</div>
<p>
Das wohl mit Abstand größte Sicherheitsrisiko bildet die Fahrweise
@ -819,14 +816,10 @@ function overview() {
sind mit dem richtigen Skill zu unglaublichem im Stande.
</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC2.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC2.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC3.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC3.mp4" />
</div>
<p>
<b>Unfälle</b> an sich sind hier auch noch mal zu erwähnen, denn es
@ -860,12 +853,10 @@ function overview() {
</div>
{/* <!--wobbles--> */}
<div class="row">
<div>
<h3 id="wobbles">Wobbles</h3>
<div class="righties">
<video id="vwobble" autoplay muted loop>
<source src="/videos/Whobble2.mp4" type="video/mp4" />
</video>
<Asset src="/videos/Whobble2.mp4" />
</div>
<p>
Wobbles sind ein noch nicht ganz verstandenes Problem. Wobble
@ -901,7 +892,7 @@ function overview() {
</div>
{/* <!--leistng--> */}
<div class="row">
<div>
<h3 id="leistung">Leistung als Sicherheitsfeature</h3>
<p>
@ -921,7 +912,7 @@ function overview() {
</div>
{/* <!--federung--> */}
<div class="row">
<div>
<h3 id="federung">Federung als Sicherheitsfeature</h3>
<p>
Fast alle neuen und angekündigten Geräte haben eine Art integrierte
@ -943,9 +934,9 @@ function overview() {
</div>
{/* <!--reifen--> */}
<div class="row">
<div>
<h3 id="reifen">Reifen</h3>
<img class="righties" src="/images/Tires.PNG" />
<Asset src="/images/Tires.PNG" />
<p>Reifen werden unterteilt in 3 Kategorien:</p>
<p>
@ -986,13 +977,15 @@ function overview() {
</div>
{/* <!--historie--> */}
<div class="row">
<div>
<h2 id="historie">Historie der EUCs</h2>
<div class="righties">
<img src="/images/solowheel-1.jpg" />
<Asset src="/images/historieEUC.webp" />
</div>
<div class="lefties">
<Asset src="/images/solowheel-1.jpg" />
</div>
<img class="lefties" src="/images/historieEUC.webp" />
<p>
Die Grundlegende Technik kam mit dem
<R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@ -1013,7 +1006,7 @@ function overview() {
<p>
Es dauerte weitere 4 Jahre, bis
<R href="#kinsong">
<R href="/de/manufacturers#kinsong">
<b>KingSong</b>
</R>
gegründet wurde, und als Wettbewerber Innovation antrieb.
@ -1034,8 +1027,8 @@ function overview() {
mehr Gedanken in Design und Qualität steckten.
</p>
<div class="righties">
<img src="/images/z10.jpeg" />
<div class="lefties">
<Asset src="/images/z10.jpeg" />
</div>
<p>
<R href="#ninebot">
@ -1061,8 +1054,8 @@ function overview() {
veröffentlichten. Und beide Geräte änderten den Markt nachhaltig.
</p>
<div class="righties">
<img src="/images/S22shutterkode1.jpg" />
<div class="lefties">
<Asset src="/images/S22shutterkode1.jpg" />
</div>
<p>
Inmotion und Kingsong haben beide relativ zeitnah die ersten Geräte
@ -1110,49 +1103,59 @@ function overview() {
</div>
{/* <!--auflistung--> */}
<div class="row">
<h2 id="geräte">Liste der Geräte</h2>
<div>
<h2 id="geraete">Liste der Geräte</h2>
<p>
Hier werden nur die relevantesten und bekanntesten Geräte
aufgelistet, eine vollständige sortierbare Übersicht ist{" "}
<R href="https://www.electricunicycles.eu/product_catalog">hier</R>.
</p>
<div class="raster">
<DeviceTile
href="/de/KSS22"
name="Kingsong S22"
src="/videos/S20Werbevideo.mp4"
/>
<DeviceTile
href="/de/KSS22"
name="Kingsong S22"
src="/videos/S20Werbevideo.mp4"
/>
<DeviceTile name="Kingsong 16X" src="/images/KS16X.jpg" />
<DeviceTile name="Kingsong 16X" src="/images/KS16X.jpg" />
<DeviceTile name="Inmotion V8" src="/images/inmotionV8.jfif" />
<DeviceTile name="Inmotion V8" src="/images/inmotionV8.jfif" />
<DeviceTile name="Inmotion V10" src="/videos/V10.mp4" />
<DeviceTile name="Inmotion V10" src="/videos/V10.mp4" />
<DeviceTile name="Inmotion V11" src="/images/V11 2.jpg" />
<DeviceTile name="Inmotion V11" src="/images/V11 2.jpg" />
<DeviceTile name="Inmotion V12" src="/images/V12 2.jpg" />
<DeviceTile name="Inmotion V12" src="/images/V12 2.jpg" />
<DeviceTile name="Inmotion V13" src="/images/V13 2.jpg" />
<DeviceTile name="Inmotion V13" src="/images/V13 2.jpg" />
<DeviceTile name="Kingsong S18" src="/images/S18.jpg" />
<DeviceTile name="Kingsong S18" src="/images/S18.jpg" />
<DeviceTile name="Begode Master" src="/images/Master.jpg" />
<DeviceTile name="Begode Master" src="/images/Master.jpg" />
<DeviceTile name="Begode T4" src="/images/T4.jpg" />
<DeviceTile name="Begode T4" src="/images/T4.jpg" />
<DeviceTile name="Begode Mten4" src="/images/Mten4.jpg" />
<DeviceTile name="Begode Mten4" src="/images/Mten4.jpg" />
<DeviceTile name="Begode Master Pro" src="/images/Master Pro.jpg" />
<DeviceTile name="Begode Master Pro" src="/images/Master Pro.jpg" />
<DeviceTile name="Begode EX30" src="/images/EX30.jpg" />
<DeviceTile name="Begode EX30" src="/images/EX30.jpg" />
<DeviceTile
name="Gotway Monster Pro"
src="/images/MonsterPro.jpg"
/>
<DeviceTile name="Gotway Monster Pro" src="/images/MonsterPro.jpg" />
<DeviceTile
name="Veteran Sherman"
src="/images/moddedSherman1.jpg"
/>
<DeviceTile name="Veteran Sherman" src="/images/moddedSherman1.jpg" />
<DeviceTile name="Veteran Sherman S" src="/images/ShermanSepic.jpg" />
<DeviceTile
name="Veteran Sherman S"
src="/images/ShermanSepic.jpg"
/>
</div>
</div>
</article>
<footer />

407
src/routes/en/KSS22.tsx
View file

@ -1,217 +1,218 @@
import { Body, Title } from "solid-start";
import { lightMode } from "~/components/en/Navbar";
import AssetHandler from "~/components/Asset";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/devices.scss";
function KSS22() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="devices" classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title>
{/* <Navbar /> */}
<FullscreenView />
<Navbar />
<div class="row">
<div class="col-4">
<img src="/images/KSS22/S22shutterkode2.jpg" />
<article>
<div>
<h2>Kingsong S22</h2>
<div class="righties">
<Asset src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<p>
The Kingsong S22, formerly S20, is a clearly off-road and
trail-oriented unicycle. Among other things, it has 130 mm
suspension travel and a robust metal construction, which makes it
ideal for big jumps and high drops.
</p>
<p>
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
km/h. The freespin is up to 114 km/h, so ideal for longer jumps
where the tire is spinning up in the air.
</p>
<p>
It also comes with a seat, pretty good jump- and power pads and
spiked pedals. Plus, a sturdy, albeit oddly placed and somewhat
short trolley handle, as well as a sturdy kickstand and
height-adjustable 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 modular design. The tire can theoretically be
removed with just 2 screws
</p>
<p>
While all of this is true, many problems have unfortunately arisen
with this highly anticipated and hyped wheel. There were motor
problems with the first devices, which led to cut-offs and burned
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
long time for replacement motors, such as upgrading the sliders for
100 to 200 €. However, with the upgrades, it is currently the best
suspension unicycle on the market. (Until the Veteran Sherman S goes
on sale.)
</p>
</div>
<div class="col-8">
<article>
<h2>Kingsong S22</h2>
<p>
The Kingsong S22, formerly S20, is a clearly off-road and
trail-oriented unicycle. Among other things, it has 130 mm
suspension travel and a robust metal construction, which makes it
ideal for big jumps and high drops.
</p>
<p>
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 km/h. The freespin is up to 114 km/h, so ideal for
longer jumps where the tire is spinning up in the air.
</p>
<p>
It also comes with a seat, pretty good jump- and power pads and
spiked pedals. Plus, a sturdy, albeit oddly placed and somewhat
short trolley handle, as well as a sturdy kickstand and
height-adjustable 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 modular design. The tire can theoretically
be removed with just 2 screws
</p>
<p>
While all of this is true, many problems have unfortunately arisen
with this highly anticipated and hyped wheel. There were motor
problems with the first devices, which led to cut-offs and burned
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
long time for replacement motors, such as upgrading the sliders
for 100 to 200 €. However, with the upgrades, it is currently the
best suspension unicycle on the market. (Until the Veteran Sherman
S goes on sale.)
</p>
</article>
<div class="grid">
<Asset src="/images/KSS22/S22shutterkode5.jpg" />
<Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
<Asset src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div>
<div class="row">
<div class="col-4">
<img src="/images/KSS22/S22shutterkode5.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/BusJump.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div>
<table>
<tbody>
<tr>
<td>Size</td>
<td>582L 330W 747H</td>
</tr>
<tr>
<td>Wheel Circumference</td>
<td>20 inches</td>
</tr>
<tr>
<td>Pedal Height</td>
<td>231 &plusmn; 26 mm</td>
</tr>
<tr>
<td>Weight</td>
<td>35 kg</td>
</tr>
<tr>
<td>Suspension travel</td>
<td>130 mm</td>
</tr>
<tr>
<td>Suspension Type</td>
<td>Oil Shock</td>
</tr>
<tr>
<td>Suspension Adjustments (for suspension)</td>
<td>Rebound, compression</td>
</tr>
<tr>
<td>Free Spin</td>
<td>114 km/h</td>
</tr>
<tr>
<td>Top speed</td>
<td>70 km/h</td>
</tr>
<tr>
<td>Range at 30 km/h</td>
<td>200 km</td>
</tr>
<tr>
<td>Minimum range for heavy use</td>
<td>70 km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. payload</td>
<td>120 kg</td>
</tr>
<tr>
<td>Engine Type</td>
<td>High Speed</td>
</tr>
<tr>
<td>Engine Power</td>
<td>3,300 W</td>
</tr>
<tr>
<td>Peak Power</td>
<td>7,500 W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2,220 Wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126 V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100 A</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>Accessories</td>
<td>Powerpads, Jumppads, Seat, Spiked Pedals</td>
</tr>
<tr>
<td>Lights</td>
<td>8 x 5 W adjustable headlights</td>
</tr>
<tr>
<td>Default tires</td>
<td>Knobby</td>
</tr>
<tr>
<td>Anti spin button?</td>
<td>under control</td>
</tr>
<tr>
<td>Display?</td>
<td>dot matrix</td>
</tr>
<tr>
<td>RGB?</td>
<td>Taillight</td>
</tr>
<tr>
<td>Pads?</td>
<td>All inclusive</td>
</tr>
<tr>
<td>Charge outlets?</td>
<td>nope</td>
</tr>
<tr>
<td>Charger:</td>
<td />
</tr>
<tr>
<td>Default load time:</td>
<td>3.3 h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10 A</td>
</tr>
<tr>
<td>Fastest load time:</td>
<td>100 minutes</td>
</tr>
<tr>
<td>Load ports:</td>
<td>2</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Size</td>
<td>582L 330W 747H</td>
</tr>
<tr>
<td>Wheel Circumference</td>
<td>20 inches</td>
</tr>
<tr>
<td>Pedal Height</td>
<td>231 &plusmn; 26 mm</td>
</tr>
<tr>
<td>Weight</td>
<td>35 kg</td>
</tr>
<tr>
<td>Suspension travel</td>
<td>130 mm</td>
</tr>
<tr>
<td>Suspension Type</td>
<td>Oil Shock</td>
</tr>
<tr>
<td>Suspension Adjustments (for suspension)</td>
<td>Rebound, compression</td>
</tr>
<tr>
<td>Free Spin</td>
<td>114 km/h</td>
</tr>
<tr>
<td>Top speed</td>
<td>70 km/h</td>
</tr>
<tr>
<td>Range at 30 km/h</td>
<td>200 km</td>
</tr>
<tr>
<td>Minimum range for heavy use</td>
<td>70 km</td>
</tr>
<tr>
<td>Max climb angle</td>
<td>45°</td>
</tr>
<tr>
<td>Max. payload</td>
<td>120 kg</td>
</tr>
<tr>
<td>Engine Type</td>
<td>High Speed</td>
</tr>
<tr>
<td>Engine Power</td>
<td>3,300 W</td>
</tr>
<tr>
<td>Peak Power</td>
<td>7,500 W</td>
</tr>
<tr>
<td>Battery Size</td>
<td>2,220 Wh</td>
</tr>
<tr>
<td>Voltage</td>
<td>126 V</td>
</tr>
<tr>
<td>Max amps</td>
<td>100 A</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>Accessories</td>
<td>Powerpads, Jumppads, Seat, Spiked Pedals</td>
</tr>
<tr>
<td>Lights</td>
<td>8 x 5 W adjustable headlights</td>
</tr>
<tr>
<td>Default tires</td>
<td>Knobby</td>
</tr>
<tr>
<td>Anti spin button?</td>
<td>under control</td>
</tr>
<tr>
<td>Display?</td>
<td>dot matrix</td>
</tr>
<tr>
<td>RGB?</td>
<td>Taillight</td>
</tr>
<tr>
<td>Pads?</td>
<td>All inclusive</td>
</tr>
<tr>
<td>Charge outlets?</td>
<td>nope</td>
</tr>
<tr>
<td>Charger:</td>
<td />
</tr>
<tr>
<td>Default load time:</td>
<td>3.3 h</td>
</tr>
<tr>
<td>Max Amps:</td>
<td>10 A</td>
</tr>
<tr>
<td>Fastest load time:</td>
<td>100 minutes</td>
</tr>
<tr>
<td>Load ports:</td>
<td>2</td>
</tr>
</tbody>
</table>
</article>
</Body>
);
}

29
src/routes/en/index.tsx
View file

@ -1,14 +1,17 @@
import { faYoutube } from "@fortawesome/free-brands-svg-icons";
import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons";
import { A, Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import { lightMode } from "~/components/en/Navbar";
import "~/styles/start.scss";
function Introduction() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="start" classList={{ "light-mode": lightMode() }}>
<Title>Introduction</Title>
<FullscreenView />
<div class="container">
<img id="cover" src="/images/Gear3.webp" />
@ -24,40 +27,26 @@ function Introduction() {
unicycles:
</p>
<div class="righties">
<img src="/images/ShermanStanding.jpg" />
</div>
<Asset src="/images/ShermanStanding.jpg" />
<p>
From 0 auf 50 km/h in 3 s, 100 km/h top speed and 230 km range make
these devices the ultimate sport.
</p>
<div class="righties">
<img src="/images/UltimativeSport.jpg" />
</div>
<Asset src="/images/UltimativeSport.jpg" />
<p>Meanwhile climbing 50° steep walls and taking MTB trails with ease.</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/MTBtrailsEase.mp4" type="video/mp4" />
</video>
</div>
<Asset src="/videos/MTBtrailsEase.mp4" />
<p>Taking every path and never get stuck in traffic again.</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/traffic.mp4" type="video/mp4" />
</video>
</div>
<Asset src="/videos/traffic.mp4" />
<p>But still being easy to carry and store just under your desk.</p>
<div class="righties">
<img src="/images/KidsKS16X.jpg" />
</div>
<Asset src="/images/KidsKS16X.jpg" />
<p>Interested? Then take a deep dive into PEV's and EUC's:</p>

58
src/routes/en/manufacturers.tsx
View file

@ -1,19 +1,22 @@
import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Manufacturers() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Manufacturers</Title>
<FullscreenView />
<Navbar />
<article>
{/*
<!--hersteller-->
*/}
<div class="row">
<div>
<h3 id="manufacturers">History and explanation of manufacturers</h3>
<p>
There are/were many manufacturers of electric unicycles, only the
@ -25,10 +28,14 @@ function Manufacturers() {
</p>
<h3 id="ninebot">
Ninebot <img class="logos" src="/images/ninebotLogo.jpg" />
Ninebot <img src="/images/ninebotLogo.jpg" />
</h3>
<img class="righties" src="/images/NineBot.webp" />
<img class="lefties" src="/images/NinebotZ10goood.webp" />
<div class="righties">
<Asset src="/images/NineBot.webp" />
</div>
<div class="lefties">
<Asset src="/images/NinebotZ10goood.webp" />
</div>
<p>
Ninebot is known to most as a sooter manufacturer, some may also
know their electric shoes or Segway-like devices with short
@ -42,10 +49,14 @@ function Manufacturers() {
</p>
<h3 id="inmotion">
Inmotion <img class="logos" src="/images/inmotionLogo.png" />
Inmotion <img src="/images/inmotionLogo.png" />
</h3>
<img class="righties" src="/images/InmotionLineup.jpg" />
<img class="lefties" src="/images/V11 3.webp" />
<div class="righties">
<Asset src="/images/InmotionLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/V11 3.webp" />
</div>
<p>
Inmotion is the second largest manufacturer of those listed here.
Also big in the standard scooter segment, Inmotion also has a large
@ -63,10 +74,14 @@ function Manufacturers() {
</p>
<h3 id="kingsong">
Kingsong <img class="logos" src="/images/kingsongLogo.png" />
Kingsong <img src="/images/kingsongLogo.png" />
</h3>
<img class="righties" src="/images/KidsKS16X.jpg" />
<img class="lefties" src="/images/kingsong2.jpg" />
<div class="righties">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<div class="lefties">
<Asset src="/images/kingsong2.jpg" />
</div>
<p>
Kingsong is very similar to Inmotion, only smaller and without the
big scooter and e-bike market behind it. Quality and design were the
@ -83,10 +98,14 @@ function Manufacturers() {
</p>
<h3 id="begode">
Gotway/Begode <img class="logos" src="/images/BEGODElogo.jpg" />
Gotway/Begode <img src="/images/BEGODElogo.jpg" />
</h3>
<img class="righties" src="/images/BegodeLineup.jpg" />
<img class="lefties" src="/images/BegodeMemeBurn.jpg" />
<div class="righties">
<Asset src="/images/BegodeLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/BegodeMemeBurn.jpg" />
</div>
<p>
Gotway, or Begode as they call themselves today, is difficult to
describe and classify. Many opinions and controversies. The company
@ -132,11 +151,14 @@ function Manufacturers() {
</p>
<h3 id="veteran">
Leaperkim/Veteran{" "}
<img class="logos" src="/images/veteranLogo.png" />
Leaperkim/Veteran <img src="/images/veteranLogo.png" />
</h3>
<img class="righties" src="/images/Shermangrey.jpg" />
<img class="lefties" src="/images/abrahams.jpg" />
<div class="righties">
<Asset src="/images/Shermangrey.jpg" />
</div>
<div class="lefties">
<Asset src="/images/abrahams.jpg" />
</div>
<p>
Veteran is the favorite for many. Comprised of ex-Gotway engineers
and employees who disagreed with Gotway's decisions, Veteran

520
src/routes/en/overview.tsx
View file

@ -1,13 +1,16 @@
import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss";
function Overview() {
const { FullscreenView, Asset } = AssetHandler();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Introduction EUCs</Title>
<FullscreenView />
<Navbar />
<header>
@ -17,7 +20,7 @@ function Overview() {
<!--Intro-->
*/}
<article>
<div class="row">
<div>
<h2>Before you read:</h2>
<p>Here are a few things before you start to read.</p>
<p>
@ -48,13 +51,15 @@ function Overview() {
{/*
<!--was sind eucs-->
*/}
<div class="row">
<div>
<h2>What are EUCs</h2>
<div class="righties">
<img src="/images/what is euc.jpg" />
<Asset src="/images/what is euc.jpg" />
</div>
<div class="lefties">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<img class="lefties" src="/images/KidsKS16X.jpg" />
<p>
EUC stands for <b>E</b>lectric<b>U</b>ni<b>C</b>ycle. In simplest
terms it's a battery powered motor surrounded by a motorcycle tire,
@ -70,21 +75,14 @@ function Overview() {
{/*
<!--warum?-->
*/}
<div class="row">
<div>
<h2 id="why">Why ride a unicycle?</h2>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/whyS22.mp4" type="video/mp4" />
</video>
<Asset src="/videos/whyS22.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source
src="/videos/SkippinTrafficDanceWW.mp4"
type="video/mp4"
/>
</video>
<Asset src="/videos/SkippinTrafficDanceWW.mp4" />
</div>
<p>
@ -170,14 +168,14 @@ function Overview() {
{/*
<!--funktion-->
*/}
<div class="row">
<div>
<h2 id="funktion">Technical functionality</h2>
<div class="righties">
<img src="/images/Funktionsblld.webp" />
<Asset src="/images/Funktionsblld.webp" />
</div>
<div class="lefties">
<img src="/images/realBattery.jpg" />
<Asset src="/images/realBattery.jpg" />
</div>
<p>
@ -232,10 +230,10 @@ function Overview() {
</p>
<div class="righties">
<img src="/images/MoBo.jpg" />
<Asset src="/images/MoBo.jpg" />
</div>
<div class="lefties">
<img src="/images/realMoBo1.PNG" />
<Asset src="/images/realMoBo1.PNG" />
</div>
<p>
The <b>motherboard</b> consists of, among other things, the power
@ -273,10 +271,10 @@ function Overview() {
</p>
<div class="righties">
<img src="/images/Motor.jpeg" />
<Asset src="/images/Motor.jpeg" />
</div>
<div class="lefties">
<img src="/images/realMotor.png" />
<Asset src="/images/realMotor.png" />
</div>
<p>
The <b id="motor">motor</b> of a unicycle is a 3-phase hub motor,
@ -333,175 +331,179 @@ function Overview() {
{/*
<!--begriffe-->
*/}
<div class="row">
<div>
<h3 id="begriffe">Glossary and specification explanation</h3>
<div class="col-6">
<p>
<b id="tiltback">Tilt-back</b>: The device's pedals tilt backwards
to slow the rider down. Used when the battery is low or when the
power demand is too high, to protect the electronics.
</p>
<p>
<b id="pedaldip">Pedal Dip</b>: The pedals dip forwards, the
device cannot maintain the requested power and the pedals suddenly
tilt forward (or backward under heavy braking). In most cases,
however, the pedals come up again immediately, so that the ride
can continue undisturbed (implies necessary skill).
</p>
<p>
<b>Pedal-angle</b>: Angle in which the pedals are mounted to the
device, seen from the front view. A steeper angle provides more
grip when cornering but can also become uncomfortable for longer
rides.
</p>
<p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spikes on the pedals that
give shoes more grip. Similar to mountain bike pedals, there are
usually screw-in pointed metal pins that grip into the shoe to
prevent accidental slipping. It's used today instead of sandpaper,
as it offers an excellent grip even in wet and muddy conditions.{" "}
<R href="https://youtu.be/aWU9lZAfKXM">Example</R>
</p>
<div class="hidden">
<img src="/images/SpikedPedals.jpeg" />
</div>
<p class="imghover">
<b id="pads">Pads</b>: parts made of plastic or foam that are
mounted on the side of the device, usually printed from TPU and
PLA and fastened with large, strong Velcro. They are necessary for
better control and handling, especially for heavy and fast
unicycles. They are divided into 2 types; many are combined
together in one set.
</p>
<div class="hidden">
<img src="/images/Pads.jpg" />
</div>
<p>
<b>Power Pads</b>: have contact with the shin and the calves, are
used for better acceleration and braking. Essential for heavy EUCs
with high pedals.
</p>
<p>
<b>Jump Pads</b>: have contact with the foot and verse, used for
jumping and safety. In case of an unexpected bump in the road,
they will hold your foot, so you don't fall off the device. But
they might cause more injury in the case of a crash, because you
can't get off quick enough
</p>
<p>
<b>Wobbles</b>: describes the unintentional wobbling of the device
at higher speeds. More on this <R href="#wobbles">here</R>
</p>
</div>
<div class="col-6">
<p class="imghover">
<b id="trolley">Trolley Handle</b>: an extendable handle for
pushing the device, similar to a suitcase.
</p>
<div class="hidden">
<img src="/images/KidsKS16X.jpg" />
</div>
<p>
<b>Kill-Switch</b>: a button under the handle that shuts off the
motor. Ensures that the motor doesn't rev up when lifting.
</p>
<p>
<b>Cut-off /Cut-out</b>: Sudden shutting off of the device while
riding, see chapter <R href="#cutout">Cut-out</R>.
</p>
<p>
<b>HS Motor</b>: High Speed motor, see chapter{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>HT Motor</b>: High Torque motor, see chapter{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>W</b>: Watt, power specification, shows how much power the
device can hold continuously. 3,000 W corresponds to 4 hp (an
e-bike has a maximum of 250 W). Not to be confused with
</p>
<p>
<b>Peak Watt</b>: Maximum power that the device can reach for a
very short time.
</p>
<p>
<b id="wh">Wh</b>: Watt-hours, energy storage information, shows
how much energy the <R href="#akku">battery</R> can store. 3,000
Wh means the battery could give 3,000 W for over an hour, or 1,500
W for 2 hours etc.
</p>
<p>
<b>BMS</b>: stands for Battery Management System,{" "}
<R href="#BMS">explained here</R>
</p>
<p>
<b>Voltage sag</b>: Voltage drop, the battery loses voltage for a
short period of time under high load, which increases the amps
flowing when the same power is requested.
</p>
<p>
<b>Freespin</b>: Maximum spin speed the motor can reach when
lifting the device. Calculate minus 20 km/h to get approximately
the reachable top speed.
</p>
<p>
<b>16 inch</b>: describes the tire size, in this case 16 inches
(40 cm) in diameter. Small diameters are agile and have a quick
response, large diameters (up to 24 inches, 60 cm) feel heavy and
sluggish but are significantly more stable at speed.
</p>
<div class="table-half">
<div>
<p>
<b>Charging Amps</b>: The maximum amps that the device can
charge with. Most new devices charge with a maximum of 10 amps,
i.e., 10 A * 126 V = 1,260 watts. The charging time is
calculated as follows:
<b id="tiltback">Tilt-back</b>: The device's pedals tilt
backwards to slow the rider down. Used when the battery is low
or when the power demand is too high, to protect the
electronics.
</p>
<table style={{ width: "100%", "font-size": "initial" }}>
<tbody>
<tr>
<td>capacity</td>
<td>&divide; (</td>
<td>volts</td>
<td>&times;</td>
<td>amps</td>
<td>) =</td>
<td>time</td>
</tr>
<tr>
<td>3,300 Wh</td>
<td>&divide; (</td>
<td>126 V</td>
<td>&times;</td>
<td>10 A</td>
<td>) =</td>
<td>2.6 h</td>
</tr>
</tbody>
</table>
<p>
<b id="pedaldip">Pedal Dip</b>: The pedals dip forwards, the
device cannot maintain the requested power and the pedals
suddenly tilt forward (or backward under heavy braking). In most
cases, however, the pedals come up again immediately, so that
the ride can continue undisturbed (implies necessary skill).
</p>
<p>
<b>Pedal-angle</b>: Angle in which the pedals are mounted to the
device, seen from the front view. A steeper angle provides more
grip when cornering but can also become uncomfortable for longer
rides.
</p>
<p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spikes on the pedals
that give shoes more grip. Similar to mountain bike pedals,
there are usually screw-in pointed metal pins that grip into the
shoe to prevent accidental slipping. It's used today instead of
sandpaper, as it offers an excellent grip even in wet and muddy
conditions. <R href="https://youtu.be/aWU9lZAfKXM">Example</R>
</p>
<div class="hidden">
<Asset src="/images/SpikedPedals.jpeg" />
</div>
<p class="imghover">
<b id="pads">Pads</b>: parts made of plastic or foam that are
mounted on the side of the device, usually printed from TPU and
PLA and fastened with large, strong Velcro. They are necessary
for better control and handling, especially for heavy and fast
unicycles. They are divided into 2 types; many are combined
together in one set.
</p>
<div class="hidden">
<Asset src="/images/Pads.jpg" />
</div>
<p>
<b>Power Pads</b>: have contact with the shin and the calves,
are used for better acceleration and braking. Essential for
heavy EUCs with high pedals.
</p>
<p>
<b>Jump Pads</b>: have contact with the foot and verse, used for
jumping and safety. In case of an unexpected bump in the road,
they will hold your foot, so you don't fall off the device. But
they might cause more injury in the case of a crash, because you
can't get off quick enough
</p>
<p>
<b>Wobbles</b>: describes the unintentional wobbling of the
device at higher speeds. More on this{" "}
<R href="#wobbles">here</R>
</p>
</div>
<div>
<p class="imghover">
<b id="trolley">Trolley Handle</b>: an extendable handle for
pushing the device, similar to a suitcase.
</p>
<div class="hidden">
<Asset src="/images/KidsKS16X.jpg" />
</div>
<p>
<b>Kill-Switch</b>: a button under the handle that shuts off the
motor. Ensures that the motor doesn't rev up when lifting.
</p>
<p>
<b>Cut-off /Cut-out</b>: Sudden shutting off of the device while
riding, see chapter <R href="#cutout">Cut-out</R>.
</p>
<p>
<b>HS Motor</b>: High Speed motor, see chapter{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>HT Motor</b>: High Torque motor, see chapter{" "}
<R href="#motor">Motor</R>.
</p>
<p>
<b>W</b>: Watt, power specification, shows how much power the
device can hold continuously. 3,000 W corresponds to 4 hp (an
e-bike has a maximum of 250 W). Not to be confused with
</p>
<p>
<b>Peak Watt</b>: Maximum power that the device can reach for a
very short time.
</p>
<p>
<b id="wh">Wh</b>: Watt-hours, energy storage information, shows
how much energy the <R href="#akku">battery</R> can store. 3,000
Wh means the battery could give 3,000 W for over an hour, or
1,500 W for 2 hours etc.
</p>
<p>
<b>BMS</b>: stands for Battery Management System,{" "}
<R href="#BMS">explained here</R>
</p>
<p>
<b>Voltage sag</b>: Voltage drop, the battery loses voltage for
a short period of time under high load, which increases the amps
flowing when the same power is requested.
</p>
<p>
<b>Freespin</b>: Maximum spin speed the motor can reach when
lifting the device. Calculate minus 20 km/h to get approximately
the reachable top speed.
</p>
<p>
<b>16 inch</b>: describes the tire size, in this case 16 inches
(40 cm) in diameter. Small diameters are agile and have a quick
response, large diameters (up to 24 inches, 60 cm) feel heavy
and sluggish but are significantly more stable at speed.
</p>
<div>
<p>
<b>Charging Amps</b>: The maximum amps that the device can
charge with. Most new devices charge with a maximum of 10
amps, i.e., 10 A * 126 V = 1,260 watts. The charging time is
calculated as follows:
</p>
<table style={{ width: "100%", "font-size": "initial" }}>
<tbody>
<tr>
<td>capacity</td>
<td>&divide; (</td>
<td>volts</td>
<td>&times;</td>
<td>amps</td>
<td>) =</td>
<td>time</td>
</tr>
<tr>
<td>3,300 Wh</td>
<td>&divide; (</td>
<td>126 V</td>
<td>&times;</td>
<td>10 A</td>
<td>) =</td>
<td>2.6 h</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
@ -509,7 +511,7 @@ function Overview() {
{/*
<!--sicherheit-->
*/}
<div class="row">
<div>
<h2 id="sicherheit">Safety</h2>
<p>
The second most common question is usually whether you don't just
@ -524,13 +526,13 @@ function Overview() {
{/*
<!--ausrüstung-->
*/}
<div class="row">
<div>
<h3 id="ausrüstung">Safety gear</h3>
<div class="righties">
<img src="/images/Gear2.jpg" />
<Asset src="/images/Gear2.jpg" />
</div>
<div class="lefties">
<img src="/images/Gear1.jpg" />
<Asset src="/images/Gear1.jpg" />
</div>
<p>
Any EUC YouTuber and experienced rider will tell you that protective
@ -580,19 +582,17 @@ function Overview() {
a Master Pro with 100 km/h.
</p>
<div>
<img src="/images/Gear3.webp" />
<Asset src="/images/Gear3.webp" />
</div>
</div>
{/*
<!--cut-offs-->
*/}
<div class="row">
<div>
<h3 id="cutout">Cut-offs</h3>
<div class="righties">
<video autoplay muted loop>
<source src="/videos/Cutout1.mp4" type="video/mp4" />
</video>
<Asset src="/videos/Cutout1.mp4" />
</div>
<p>
Cut-offs are the largest source of accidents the rider is mostly not
@ -667,7 +667,7 @@ function Overview() {
{/*
<!--akkusicheit-->
*/}
<div class="row">
<div>
<h3 id="akkuss">Battery safety and fires</h3>
<p>
First of all: in contrast to for example hoverboards, unicycles are
@ -682,11 +682,11 @@ function Overview() {
, the worry is now also there for other brands.
</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/shortS22Fire.MP4" type="video/mp4" />
</video>
<Asset src="/videos/shortS22Fire.MP4" />
</div>
<div class="lefties">
<Asset src="/images/burned.png" />
</div>
<img class="lefties" src="/images/burned.png" />
<p>
There are several <b>causes</b>, here are a few examples:
</p>
@ -740,22 +740,21 @@ function Overview() {
</p>
<div class="righties">
<img src="/images/BMS.jpg" />
<Asset src="/images/BMS.jpg" />
</div>
<p>
<b>Battery safety</b>: A <b id="BMS">BMS</b> is responsible for
this. A <b>B</b>attery <b>M</b>anagement <b>S</b>ystem has the task
<br />
-to protect the battery from excessive currents,
- to protect the battery from excessive currents,
<br />
-not to let it discharge below the specified voltage,
- not to let it discharge below the specified voltage,
<br />
-not to charge it beyond the maximum voltage,
- not to charge it beyond the maximum voltage,
<br />
-keep an eye on the temperature and
<br />
-disconnect from the rest of the system in the event of a short
circuit.
- keep an eye on the temperature and
<br />- disconnect from the rest of the system in the event of a
short circuit.
</p>
<p>
Better BMS's, also known as smart BMS, can also actively adjust the
@ -778,17 +777,13 @@ function Overview() {
{/*
<!--fahrweise-->
*/}
<div class="row">
<div>
<h3 id="fahrweise">Ride style</h3>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC4bad.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC4bad.mp4" />
</div>
<p>
By far the greatest safety risk is the rider's riding style. Similar
@ -827,14 +822,10 @@ function Overview() {
of incredible things.
</p>
<div class="righties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC2.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC2.mp4" />
</div>
<div class="lefties">
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/FahrweiseNYC3.mp4" type="video/mp4" />
</video>
<Asset src="/videos/FahrweiseNYC3.mp4" />
</div>
<p>
<b>Accidents</b> themselves are also worth mentioning here, because
@ -867,12 +858,10 @@ function Overview() {
{/*
<!--wobbles-->
*/}
<div class="row">
<div>
<h3 id="wobbles">Wobbles</h3>
<div class="righties">
<video id="vwobble" autoplay muted loop>
<source src="/videos/Whobble2.mp4" type="video/mp4" />
</video>
<Asset src="/videos/Whobble2.mp4" />
</div>
<p>
Wobbles are a problem not fully understood yet. Wobble describes the{" "}
@ -907,7 +896,7 @@ function Overview() {
{/*
<!--leistng-->
*/}
<div class="row">
<div>
<h3 id="leistung">Performance as a safety feature</h3>
<p>
@ -928,7 +917,7 @@ function Overview() {
{/*
<!--federung-->
*/}
<div class="row">
<div>
<h3 id="federung">Suspension as a safety feature</h3>
<p>
Almost all new and announced devices have some form of built-in
@ -950,9 +939,9 @@ function Overview() {
{/*
<!--reifen-->
*/}
<div class="row">
<div>
<h3 id="reifen">Tires</h3>
<img class="righties" src="/images/Tires.PNG" />
<Asset src="/images/Tires.PNG" />
<p>Tires can be divided into 3 categories:</p>
<p>
@ -998,13 +987,15 @@ function Overview() {
{/*
<!--historie-->
*/}
<div class="row">
<div>
<h2 id="historie">History of EUCs</h2>
<div class="righties">
<img src="/images/solowheel-1.jpg" />
<Asset src="/images/historieEUC.webp" />
</div>
<div class="lefties">
<Asset src="/images/solowheel-1.jpg" />
</div>
<img class="lefties" src="/images/historieEUC.webp" />
<p>
The underlying technique came with the
<R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@ -1026,7 +1017,7 @@ function Overview() {
<p>
It took another 4 years for
<R href="#kinsong">
<R href="/de/manufacturers#kinsong">
<b>KingSong</b>
</R>
to be foundet and driving innovation as a competitor.
@ -1047,8 +1038,8 @@ function Overview() {
thought into design and quality.
</p>
<div class="righties">
<img src="/images/z10.jpeg" />
<div class="lefties">
<Asset src="/images/z10.jpeg" />
</div>
<p>
<R href="#ninebot">
@ -1073,8 +1064,8 @@ function Overview() {
both devices are changing the market forever.
</p>
<div class="righties">
<img src="/images/S22shutterkode1.jpg" />
<div class="lefties">
<Asset src="/images/S22shutterkode1.jpg" />
</div>
<p>
Inmotion and Kingsong both released the first devices with{" "}
@ -1122,49 +1113,60 @@ function Overview() {
{/*
<!--auflistung-->
*/}
<div class="row">
<h2 id="geräte">List of devices</h2>
<div>
<h2 id="geraete">List of devices</h2>
<p>
Only the most relevant and well-known devices are listed here, a
complete, sortable overview is available{" "}
<R href="https://www.electricunicycles.eu/product_catalog">here</R>.
</p>
<DeviceTile
href="/en/KSS22"
name="Kingsong S22"
src="/videos/S20Werbevideo.mp4"
/>
<div class="raster">
<DeviceTile
href="/en/KSS22"
name="Kingsong S22"
src="/videos/S20Werbevideo.mp4"
/>
<DeviceTile name="Kingsong 16X" src="/images/KS16X.jpg" />
<DeviceTile name="Kingsong 16X" src="/images/KS16X.jpg" />
<DeviceTile name="Inmotion V8" src="/images/inmotionV8.jfif" />
<DeviceTile name="Inmotion V8" src="/images/inmotionV8.jfif" />
<DeviceTile name="Inmotion V10" src="/videos/V10.mp4" />
<DeviceTile name="Inmotion V10" src="/videos/V10.mp4" />
<DeviceTile name="Inmotion V11" src="/images/V11 2.jpg" />
<DeviceTile name="Inmotion V11" src="/images/V11 2.jpg" />
<DeviceTile name="Inmotion V12" src="/images/V12 2.jpg" />
<DeviceTile name="Inmotion V12" src="/images/V12 2.jpg" />
<DeviceTile name="Inmotion V13" src="/images/V13 2.jpg" />
<DeviceTile name="Inmotion V13" src="/images/V13 2.jpg" />
<DeviceTile name="Kingsong S18" src="/images/S18.jpg" />
<DeviceTile name="Kingsong S18" src="/images/S18.jpg" />
<DeviceTile name="Begode Master" src="/images/Master.jpg" />
<DeviceTile name="Begode Master" src="/images/Master.jpg" />
<DeviceTile name="Begode T4" src="/images/T4.jpg" />
<DeviceTile name="Begode T4" src="/images/T4.jpg" />
<DeviceTile name="Begode Mten4" src="/images/Mten4.jpg" />
<DeviceTile name="Begode Mten4" src="/images/Mten4.jpg" />
<DeviceTile name="Begode Master Pro" src="/images/Master Pro.jpg" />
<DeviceTile name="Begode Master Pro" src="/images/Master Pro.jpg" />
<DeviceTile name="Begode EX30" src="/images/EX30.jpg" />
<DeviceTile name="Begode EX30" src="/images/EX30.jpg" />
<DeviceTile name="Gotway Monster Pro" src="/images/MonsterPro.jpg" />
<DeviceTile
name="Gotway Monster Pro"
src="/images/MonsterPro.jpg"
/>
<DeviceTile name="Veteran Sherman" src="/images/moddedSherman1.jpg" />
<DeviceTile
name="Veteran Sherman"
src="/images/moddedSherman1.jpg"
/>
<DeviceTile name="Veteran Sherman S" src="/images/ShermanSepic.jpg" />
<DeviceTile
name="Veteran Sherman S"
src="/images/ShermanSepic.jpg"
/>
</div>
</div>
</article>
<footer />

2
src/routes/soon.tsx
View file

@ -5,7 +5,7 @@ import "~/styles/overview.scss";
function soon() {
const navigate = useNavigate();
return (
<Body classList={{ "light-mode": lightMode() }}>
<Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>soon</Title>
<Navbar />
<p style={{ "text-align": "center" }}>This side is not available yet.</p>

201
src/styles/devices.scss
View file

@ -16,129 +16,110 @@
background: #555;
}
[class*="col-"] {
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;
button {
all: unset;
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 1.4em;
border: none;
&:hover {
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
}
}
}
.main {
height: 100%;
}
body {
body.devices {
background-color: #16161a;
color: #94a1b2;
font-size: 1.4em;
}
h1 {
font-size: 2.5em;
}
// #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;
h2 {
font-size: 2em;
}
// button {
// all: unset;
// margin: 5px auto;
// color: #eff0f3;
// padding-left: 10px;
// padding-right: 10px;
// text-decoration: none;
// font-size: 1.4em;
// border: none;
h3 {
font-size: 1.6em;
margin-left: 140px;
}
// &:hover {
// background: #eff0f3;
// color: #2a2a2a;
// cursor: pointer;
// }
// }
// }
p {
text-align: justify;
font-size: 0.875em;
}
.main {
height: 100%;
}
header {
text-align: center;
}
h1 {
font-size: 2.5em;
}
footer,
aside,
article {
text-align: center;
padding: 2%;
margin: 1.5%;
}
h2 {
font-size: 2em;
}
img {
width: 100%;
max-width: max-content;
padding: 16px;
height: auto;
h3 {
font-size: 1.6em;
margin-left: 140px;
}
display: block;
}
p {
text-align: justify;
font-size: 0.875em;
}
.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%;
}
header {
text-align: center;
}
@media only screen and (max-width: 767px) {
[class*="col-"] {
footer,
aside,
article {
text-align: center;
}
img {
width: 100%;
max-width: max-content;
padding: 16px;
height: auto;
display: block;
}
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
.span-2 {
grid-column: span 2;
}
}
table {
width: 100%;
border-collapse: collapse;
td,
th {
border: 1px solid;
padding: 0.25rem;
}
tbody td {
text-align: left;
}
}
@media only screen and (max-width: 767px) {
// [class*="col-"] {
// width: 100%;
// }
}
}

194
src/styles/global.scss Normal file
View file

@ -0,0 +1,194 @@
body {
margin: 0;
}
.fullscreen-asset {
position: fixed;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:not(.active) {
display: none;
}
img,
video {
max-width: 80vw;
transform-origin: center;
transform: scale(var(--zoom));
&.active {
opacity: 0;
}
}
img:not(.move),
video:not(.move) {
transition: transform-origin 1s;
}
img.move,
video.move {
transform-origin: var(--x) var(--y);
}
.controlls {
position: absolute;
top: 2rem;
right: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
button {
padding: 0.5rem 0.6rem;
svg {
height: 2rem;
width: 2rem;
}
}
}
}
.menu {
position: absolute;
top: 2rem;
left: 2rem;
padding: 0.5rem 0.6rem;
svg {
height: 2rem;
width: 2rem;
}
}
article > div {
clear: both;
}
.righties {
margin-top: -8px;
margin-left: 24px;
width: 33%;
float: right;
clear: both;
}
.lefties {
margin-top: -8px;
margin-right: 24px;
width: 33%;
float: left;
display: none;
}
#navbar {
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
background-color: #121629;
position: fixed;
top: 0;
height: 100%;
margin-left: -8px;
padding: 1rem;
button {
border-radius: 16px;
scale: 0.9;
&:hover {
scale: 1.06;
}
}
a {
float: none;
display: block;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
&:hover {
background: #eff0f3;
color: #121629;
cursor: pointer;
}
}
}
body.light-mode {
background-color: #eff0f3;
color: #2a2a2a;
.lefties,
.righties {
> * {
box-shadow: #eff0f3 0 0 1rem 1rem;
}
}
article p a {
text-align: justify;
text-decoration: underline;
color: #2a2a2a;
}
b {
color: #2a2a2a;
a {
color: #2a2a2a;
}
}
h3 {
color: #2a2a2a;
}
h1 {
color: #2a2a2a;
}
h2 {
color: #2a2a2a;
}
#navbar {
background-color: #b8c1ec;
a {
color: black;
}
}
// #sidenavbar {
// background-color: #b8c1ec;
// a {
// color: black;
// }
// }
button {
background-color: #b8c1ec;
color: black;
}
/*Raster Einstellungen*/
.raster > a {
background-color: #eff0f3;
}
a {
color: #2a2a2a;
}
}
@media (min-width: 960px) {
article {
max-width: 80vw;
margin: auto;
}
}

520
src/styles/overview.scss
View file

@ -21,399 +21,221 @@
background: #555;
}
[class*="col-"] {
float: left;
}
.row {
clear: both;
}
body.overview {
background-color: #16161a;
color: #94a1b2;
text-align: center;
font-size: 1.4em;
#navbar {
z-index: 1;
overflow-y: auto;
overflow-x: hidden;
background-color: #121629;
position: fixed;
top: 0;
height: 100%;
margin-left: -8px;
button {
border-radius: 16px;
scale: 0.9;
&:hover {
scale: 1.06;
}
.main {
height: 100%;
}
a {
float: none;
display: block;
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;
}
footer,
aside,
article {
text-align: center;
}
> img {
width: 100%;
max-width: max-content;
height: auto;
}
button {
background-color: #121629;
color: #eff0f3;
text-align: left;
padding: 8px 8px;
text-decoration: none;
font-size: 0.9em;
&:hover {
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;
button {
all: unset;
margin: 5px auto;
color: #eff0f3;
padding-left: 10px;
padding-right: 10px;
p a {
text-align: justify;
text-decoration: none;
font-size: 1.4em;
border: none;
color: #91c4ff;
border-bottom: 1px solid navy;
&:hover {
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
border-bottom: 1px solid #91c4ff;
}
}
}
.main {
height: 100%;
}
body {
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;
}
footer,
aside,
article {
text-align: center;
padding-left: 15px;
margin: 1.5%;
margin-left: 145px;
}
img {
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;
}
p a {
text-align: justify;
text-decoration: none;
color: #91c4ff;
border-bottom: 1px solid navy;
&:hover {
border-bottom: 1px solid #91c4ff;
.svg-inline--fa,
b {
color: #91c4ff;
}
}
.svg-inline--fa,
b {
color: #91c4ff;
}
.righties {
margin: 0 2%;
margin-right: 0%;
padding: 0%;
width: 33%;
float: right;
transition: width 1.5s;
clear: both;
&:hover {
width: 50%;
#vcutout {
width: 25%;
}
}
.lefties {
margin-right: 20px;
width: 33%;
height: 100%;
float: left;
transition: width 1.5s;
display: none;
&:hover {
width: 50%;
#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;
}
/*wenn hover über text, zeige bild*/
.imghover:hover + .hidden {
display: block;
}
.light-mode {
background-color: #eff0f3;
color: #2a2a2a;
article p a {
text-align: justify;
text-decoration: underline;
color: #2a2a2a;
float: left;
padding: 2%;
padding-left: 0%;
display: none;
}
b {
color: #2a2a2a;
a {
color: #2a2a2a;
}
}
h3 {
color: #2a2a2a;
}
h1 {
color: #2a2a2a;
}
h2 {
color: #2a2a2a;
}
#navbar {
background-color: #b8c1ec;
a {
color: black;
}
}
#sidenavbar {
background-color: #b8c1ec;
a {
color: black;
}
}
button {
background-color: #b8c1ec;
color: black;
/*wenn hover über text, zeige bild*/
.imghover:hover + .hidden {
display: block;
}
/*Raster Einstellungen*/
.raster {
background-color: #eff0f3;
}
a {
color: #2a2a2a;
}
}
a {
display: inline;
color: rgb(225, 223, 210);
display: inline;
color: rgb(225, 223, 210);
svg.left {
margin-right: 2px;
}
svg.right {
margin-left: 6px;
}
div img,
div video {
border-radius: 10%;
max-width: 260px;
max-height: 290px;
padding-top: 8px;
bottom: 0;
}
div h3 {
margin: 0.5%;
}
}
.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;
&:hover {
scale: 1.06;
a div img {
width: 110%;
svg.left {
margin-right: 2px;
}
svg.right {
margin-left: 6px;
}
div img,
div video {
border-radius: 10%;
max-width: 260px;
max-height: 290px;
padding-top: 8px;
bottom: 0;
}
div h3 {
margin: 0.5%;
}
}
}
.raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
.logos {
height: 1.6em;
margin-bottom: -18px;
}
> a {
border: #555;
padding: 2rem 1rem;
border-width: 2px;
border-style: solid;
border-radius: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
.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%;
}
transition: scale 0.5s;
@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%;
&:hover {
scale: 1.06;
}
&:hover {
h3 {
font-size: 1.5rem;
margin: 0;
}
img,
video {
height: 100%;
object-fit: cover;
border-radius: 1rem;
}
}
}
.logos {
height: 1.6em;
margin-bottom: -18px;
}
.table-half {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
@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%;
&:hover {
width: 100%;
}
}
}
}
@media only screen and (min-width: 767px) /*über handy größe*/ {
#navbar {
visibility: visible;
@media only screen and (min-width: 767px) /*über handy größe*/ {
#navbar {
visibility: visible;
}
// #sidenavbar {
// visibility: hidden;
// }
/*.raster {width: calc(100%/5);}*/
}
#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: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%;
@media screen and (min-width: 1900px) /*HD Fullscreen only*/ {
.lefties {
display: block;
width: 27%;
}
.righties {
width: 27%;
}
}
.righties {
width: 27%;
}
}
@media screen and (min-width: 2250px) /*ab 2000px nicht weiter skalieren*/ {
* {
width: 1950px;
margin-left: auto;
margin-right: auto;
@media screen and (min-width: 2250px) /*ab 2000px nicht weiter skalieren*/ {
* {
width: 1950px;
margin-left: auto;
margin-right: auto;
}
}
}

147
src/styles/start.scss
View file

@ -21,91 +21,96 @@
background: #555;
}
[class*="col-"] {
float: left;
}
.row {
clear: both;
}
body {
body.start {
background-color: #0f0e17;
color: #a7a9be;
text-align: left;
font-size: 1.4em;
max-width: 900px;
max-width: 1200px;
margin: auto;
}
display: flex;
align-items: center;
flex-direction: column;
p {
padding: 10px;
}
#cover {
opacity: 60%;
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gone {
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;
}
a {
text-decoration: none;
&:hover {
scale: 1.06;
> img,
> video {
max-height: 60vh;
}
div p {
text-align: center;
padding: 20px;
.row {
clear: both;
}
}
.righties {
padding-bottom: 30px;
padding-top: 20px;
width: 100%;
clear: both;
}
p {
padding: 10px;
}
@media (max-width: 767px) /*unter handy größe*/ {
.centered {
display: none;
}
#gone {
display: block;
}
#cover {
opacity: 100%;
opacity: 60%;
}
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#gone {
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;
}
a {
text-decoration: none;
&:hover {
scale: 1.06;
}
div p {
text-align: center;
padding: 20px;
}
}
.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%;
}
}
}