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;

2
src/components/DeviceTile.tsx
View file

@ -4,7 +4,6 @@ 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} />
@ -14,7 +13,6 @@ function DeviceTile(props: { href?: string; name: string; src: string }) {
<source src={props.src} type="video/mp4" />
</video>
</Show>
</div>
</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>

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

@ -1,26 +1,22 @@
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>
<div class="row">
<div class="col-4">
<img src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<div class="col-8">
<article>
<div>
<h2>Kingsong S22</h2>
<div class="righties">
<Asset src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<p>
Das Kingsong S22, früher S20, ist ein klar Offroad und Trail
@ -30,51 +26,49 @@ function KSS22() {
</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
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
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.)
Motorprobleme mit den ersten Geräten, welche zu cut-offs führten und
dadurch das Motherboard durchbrannten. Auch ist das Slider Design
sehr schwerfällig und über die Zeit immer schwerer zu bewegen. So
mussten viele s22 Käufer lange auf Ersatzmotoren warten, so wie für
100 bis 200 € die Slider upgraden. Mit den Upgrades jedoch ist es
das momentan bester Suspension Einrad auf dem Markt. (Bis das
Veteran Sherman S zu kaufen ist.)
</p>
</article>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="/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 class="grid">
<Asset src="/images/KSS22/S22shutterkode5.jpg" />
<Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
<Asset src="/images/KSS22/S22shutterkode4.jpg" />
</div>
<table>
<thead>
<tr>
<th>Eigenschaft</th>
<th>Wert</th>
</tr>
</thead>
<tbody>
<tr>
<td>Größe</td>
@ -220,6 +214,7 @@ function KSS22() {
</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

241
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,14 +328,15 @@ function overview() {
</div>
{/* <!--begriffe--> */}
<div class="row">
<div>
<h3 id="begriffe">Begriffs- und Spezifikationserklärungen</h3>
<div class="col-6">
<div class="table-half">
<div>
<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.
<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
@ -353,28 +352,28 @@ function overview() {
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.{" "}
<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" />
<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.{" "}
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" />
<Asset src="/images/Pads.jpg" />
</div>
<p>
<b>Power Pads</b>: haben Kontakt an den Waden und dem
@ -382,25 +381,27 @@ function overview() {
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.
<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>
<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">
<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">
<img src="/images/KidsKS16X.jpg" />
<Asset src="/images/KidsKS16X.jpg" />
</div>
<p>
@ -425,14 +426,14 @@ function overview() {
</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
<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.
<b>Peak Watt</b>: Maximale Leistung, die das Gerät für sehr
kurze Zeit erreichen kann.
</p>
<p>
@ -448,31 +449,32 @@ function overview() {
</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.
<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.
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.
(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:
<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%" }}>
@ -500,9 +502,10 @@ function overview() {
</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,7 +736,7 @@ 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.
@ -748,8 +749,8 @@ function overview() {
- 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.
<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,14 +1103,14 @@ 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"
@ -1148,11 +1141,21 @@ function overview() {
<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 />

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

@ -1,22 +1,24 @@
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" />
</div>
<div class="col-8">
<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
@ -25,10 +27,10 @@ function KSS22() {
</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.
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>
@ -37,8 +39,8 @@ function KSS22() {
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
the device has a very modular design. The tire can theoretically be
removed with just 2 screws
</p>
<p>
@ -47,28 +49,26 @@ function KSS22() {
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.)
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>
</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 class="grid">
<Asset src="/images/KSS22/S22shutterkode5.jpg" />
<Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
<Asset src="/images/KSS22/S22shutterkode4.jpg" />
</div>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Size</td>
@ -212,6 +212,7 @@ function KSS22() {
</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

218
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,21 +331,23 @@ function Overview() {
{/*
<!--begriffe-->
*/}
<div class="row">
<div>
<h3 id="begriffe">Glossary and specification explanation</h3>
<div class="col-6">
<div class="table-half">
<div>
<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.
<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).
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>
@ -358,33 +358,33 @@ function Overview() {
</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>
<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" />
<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
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" />
<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.
<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>
@ -396,18 +396,19 @@ function Overview() {
</p>
<p>
<b>Wobbles</b>: describes the unintentional wobbling of the device
at higher speeds. More on this <R href="#wobbles">here</R>
<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">
<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">
<img src="/images/KidsKS16X.jpg" />
<Asset src="/images/KidsKS16X.jpg" />
</div>
<p>
@ -444,8 +445,8 @@ function Overview() {
<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.
Wh means the battery could give 3,000 W for over an hour, or
1,500 W for 2 hours etc.
</p>
<p>
@ -454,8 +455,8 @@ function Overview() {
</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
<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>
@ -468,15 +469,15 @@ function Overview() {
<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.
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
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>
@ -505,11 +506,12 @@ function Overview() {
</div>
</div>
</div>
</div>
{/*
<!--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,7 +740,7 @@ 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
@ -753,9 +753,8 @@ function Overview() {
- 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.
<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,14 +1113,15 @@ 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>
<div class="raster">
<DeviceTile
href="/en/KSS22"
name="Kingsong S22"
@ -1160,11 +1152,21 @@ function Overview() {
<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>

133
src/styles/devices.scss
View file

@ -16,49 +16,44 @@
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;
// #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%;
}
h1 {
@ -87,8 +82,6 @@ footer,
aside,
article {
text-align: center;
padding: 2%;
margin: 1.5%;
}
img {
@ -100,45 +93,33 @@ img {
display: block;
}
.col-1 {
width: 8.33%;
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
.span-2 {
grid-column: span 2;
}
.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 {
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%;
// [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;
}
}

262
src/styles/overview.scss
View file

@ -21,90 +21,16 @@
background: #555;
}
[class*="col-"] {
float: left;
}
.row {
clear: both;
}
#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;
}
}
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;
}
}
}
#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;
body.overview {
background-color: #16161a;
color: #94a1b2;
text-align: center;
font-size: 1.4em;
border: none;
&:hover {
background: #eff0f3;
color: #2a2a2a;
cursor: pointer;
}
}
}
.main {
height: 100%;
}
body {
background-color: #16161a;
color: #94a1b2;
text-align: center;
font-size: 1.4em;
}
h1 {
font-size: 2.5em;
color: #fffffe;
@ -124,22 +50,17 @@ p {
}
header {
text-align: center;
padding-left: 140px;
}
footer,
aside,
article {
text-align: center;
padding-left: 15px;
margin: 1.5%;
margin-left: 145px;
}
img {
> img {
width: 100%;
max-width: max-content;
height: auto;
margin-top: -8px;
}
button {
@ -166,33 +87,6 @@ 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%;
}
}
.lefties {
margin-right: 20px;
width: 33%;
height: 100%;
float: left;
transition: width 1.5s;
display: none;
&:hover {
width: 50%;
}
}
#vcutout {
width: 25%;
}
@ -215,58 +109,6 @@ b {
display: block;
}
.light-mode {
background-color: #eff0f3;
color: #2a2a2a;
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 {
background-color: #eff0f3;
}
a {
color: #2a2a2a;
}
}
a {
display: inline;
color: rgb(225, 223, 210);
@ -290,23 +132,36 @@ a {
}
}
.raster {
width: 300px;
height: 350px;
float: left;
padding: 1%;
padding-top: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
> a {
border: #555;
padding: 2rem 1rem;
border-width: 2px;
border-style: solid;
border-radius: 10%;
scale: 0.9;
font-size: 0.9em;
border-radius: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
transition: scale 0.5s;
&:hover {
scale: 1.06;
}
a div img {
width: 110%;
h3 {
font-size: 1.5rem;
margin: 0;
}
img,
video {
height: 100%;
object-fit: cover;
border-radius: 1rem;
}
}
}
@ -316,41 +171,10 @@ a {
margin-bottom: -18px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 12.5%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
.table-half {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
@media (max-width: 767px) /*unter handy größe*/ {
@ -364,15 +188,15 @@ a {
margin-left: 0%;
padding-left: 0;
}
[class*="col-"] {
width: 100%;
}
// [class*="col-"] {
// width: 100%;
// }
#navbar {
visibility: hidden;
}
#sidenavbar {
visibility: visible;
}
// #sidenavbar {
// visibility: visible;
// }
/*.raster {width: calc(100%/2);}*/
.righties {
width: 100%;
@ -387,13 +211,10 @@ a {
#navbar {
visibility: visible;
}
#sidenavbar {
visibility: hidden;
}
// #sidenavbar {
// visibility: hidden;
// }
/*.raster {width: calc(100%/5);}*/
div div button {
visibility: hidden;
}
}
/*@media screen and (min-width:1200px) {.raster {width: calc(100%/6);}}
@ -417,3 +238,4 @@ a {
margin-right: auto;
}
}
}

23
src/styles/start.scss
View file

@ -21,20 +21,24 @@
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;
> img,
> video {
max-height: 60vh;
}
.row {
clear: both;
}
p {
@ -109,3 +113,4 @@ a {
width: 100%;
}
}
}