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 }) { function DeviceTile(props: { href?: string; name: string; src: string }) {
return ( return (
<A href={props.href ?? "/soon"}> <A href={props.href ?? "/soon"}>
<div class="raster">
<h3>{props.name}</h3> <h3>{props.name}</h3>
<Show when={props.src.startsWith("/images")}> <Show when={props.src.startsWith("/images")}>
<img src={props.src} alt={props.name} /> <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" /> <source src={props.src} type="video/mp4" />
</video> </video>
</Show> </Show>
</div>
</A> </A>
); );
} }

2
src/components/Reference.tsx
View file

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

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

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

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

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

3
src/root.tsx
View file

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

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

@ -1,26 +1,22 @@
import { Body, Title, useNavigate } from "solid-start"; 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"; import "~/styles/devices.scss";
function KSS22() { function KSS22() {
const navigate = useNavigate(); const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="devices" classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title> <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> <article>
<div>
<h2>Kingsong S22</h2> <h2>Kingsong S22</h2>
<div class="righties">
<Asset src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<p> <p>
Das Kingsong S22, früher S20, ist ein klar Offroad und Trail Das Kingsong S22, früher S20, ist ein klar Offroad und Trail
@ -30,51 +26,49 @@ function KSS22() {
</p> </p>
<p> <p>
Es ist der Nachfolger vom kleineren S18, aber mit doppeltem Akku Es ist der Nachfolger vom kleineren S18, aber mit doppeltem Akku und
und 50 % mehr Motor Leistung, so wie 70 statt 50 km/h top 50 % mehr Motor Leistung, so wie 70 statt 50 km/h top
Geschwindigkeit. Wobei der Freespin bis zu 114 km/h hoch ist, also 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. ideal für längere Sprünge bei denen der Reifen in der Luft ist.
</p> </p>
<p> <p>
Außerdem hat es gleich mitgeliefert einen Sitz, ziemlich Außerdem hat es gleich mitgeliefert einen Sitz, ziemlich brauchbare
brauchbare Jump wie Powerpads und Spiked-Pedals. Dazu einen Jump wie Powerpads und Spiked-Pedals. Dazu einen robusten, wenn auch
robusten, wenn auch komisch platzierten und etwas kurzen komisch platzierten und etwas kurzen Trolleyhandle, sowie einen
Trolleyhandle, sowie einen stabilen Kickstand und stabilen Kickstand und höhenverstellbare helle Lichter. Es ist
höhenverstellbare helle Lichter. Es ist Wasserfest, aber nicht Wasserfest, aber nicht eintauchbar, und das Beste: es ist
eintauchbar, und das Beste: es ist superleicht daran zu arbeiten, superleicht daran zu arbeiten, weil das Gerät sehr modular designt
weil das Gerät sehr modular designt wurde. So lässt sich der wurde. So lässt sich der Reifen mit theoretisch nur 2 schrauben
Reifen mit theoretisch nur 2 schrauben rausnehmen rausnehmen
</p> </p>
<p> <p>
Während all das wahr ist, haben sich leider mit diesem hoch Während all das wahr ist, haben sich leider mit diesem hoch
erwartetem und gehypten Rad auch viele Probleme ergeben. So gab es erwartetem und gehypten Rad auch viele Probleme ergeben. So gab es
Motorprobleme mit den ersten Geräten, welche zu cut-offs führten Motorprobleme mit den ersten Geräten, welche zu cut-offs führten und
und dadurch das Motherboard durchbrannten. Auch ist das Slider dadurch das Motherboard durchbrannten. Auch ist das Slider Design
Design sehr schwerfällig und über die Zeit immer schwerer zu sehr schwerfällig und über die Zeit immer schwerer zu bewegen. So
bewegen. So mussten viele s22 Käufer lange auf Ersatzmotoren mussten viele s22 Käufer lange auf Ersatzmotoren warten, so wie für
warten, so wie für 100 bis 200 € die Slider upgraden. Mit den 100 bis 200 € die Slider upgraden. Mit den Upgrades jedoch ist es
Upgrades jedoch ist es das momentan bester Suspension Einrad auf das momentan bester Suspension Einrad auf dem Markt. (Bis das
dem Markt. (Bis das Veteran Sherman S zu kaufen ist.) Veteran Sherman S zu kaufen ist.)
</p> </p>
</article>
</div>
</div> </div>
<div class="row"> <div class="grid">
<div class="col-4"> <Asset src="/images/KSS22/S22shutterkode5.jpg" />
<img src="/images/KSS22/S22shutterkode5.jpg" /> <Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
</div> <Asset src="/images/KSS22/S22shutterkode4.jpg" />
<div class="col-4">
<img src="/images/KSS22/BusJump.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div> </div>
<table> <table>
<thead>
<tr>
<th>Eigenschaft</th>
<th>Wert</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<td>Größe</td> <td>Größe</td>
@ -220,6 +214,7 @@ function KSS22() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</article>
</Body> </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 { faYoutube } from "@fortawesome/free-brands-svg-icons";
import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons"; import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons";
import { A, Body, Title } from "solid-start"; import { A, Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon"; import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import { lightMode } from "~/components/de/Navbar"; import { lightMode } from "~/components/de/Navbar";
import "~/styles/start.scss"; import "~/styles/start.scss";
function Introduction() { function Introduction() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="start" classList={{ "light-mode": lightMode() }}>
<Title>Einführung</Title> <Title>Einführung</Title>
<FullscreenView />
<div class="container"> <div class="container">
<img id="cover" src="/images/Gear3.webp" /> <img id="cover" src="/images/Gear3.webp" />
<div class="centered"> <div class="centered">
@ -23,39 +27,25 @@ function Introduction() {
Flexible - Modern - schneller als die Polizei erlaubt. Das sind moderne Flexible - Modern - schneller als die Polizei erlaubt. Das sind moderne
eletrische Einräder. eletrische Einräder.
</p> </p>
<div class="righties"> <Asset src="/images/ShermanStanding.jpg" />
<img src="/images/ShermanStanding.jpg" />
</div>
<p> <p>
Von 0 auf 50 km/h in 3 s, 100 km/h top Geschwindigkeit und 230 km 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. Reichweite machen aus diesen Geräten den ultimativen Sport.
</p> </p>
<div class="righties"> <Asset src="/images/UltimativeSport.jpg" />
<img src="/images/UltimativeSport.jpg" />
</div>
<p> <p>
Gleichzeitig 50° steile Wände hochfahren und MTB Trails mit leichtigkeit Gleichzeitig 50° steile Wände hochfahren und MTB Trails mit leichtigkeit
nehmen. nehmen.
</p> </p>
<div class="righties"> <Asset src="/videos/MTBtrailsEase.mp4" />
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/MTBtrailsEase.mp4" type="video/mp4" />
</video>
</div>
<p>Jeden Weg nutzen und nie wieder im Verkehr stecken.</p> <p>Jeden Weg nutzen und nie wieder im Verkehr stecken.</p>
<div class="righties"> <Asset src="/videos/traffic.mp4" />
<video width="auto" height="auto" autoplay muted loop>
<source src="/videos/traffic.mp4" type="video/mp4" />
</video>
</div>
<p>Und trotzdem leicht zu transportiren und untern Tisch zu packen.</p> <p>Und trotzdem leicht zu transportiren und untern Tisch zu packen.</p>
<div class="righties"> <Asset src="/images/KidsKS16X.jpg" />
<img src="/images/KidsKS16X.jpg" />
</div>
<p>Interessiert? Dann tauche in die Welt der PEV's und EUC's ein:</p> <p>Interessiert? Dann tauche in die Welt der PEV's und EUC's ein:</p>

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

@ -1,18 +1,22 @@
import { Body, Title } from "solid-start"; import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar"; import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss"; import "~/styles/overview.scss";
function Manufacturers() { function Manufacturers() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Hersteller</Title> <Title>Hersteller</Title>
<FullscreenView />
<Navbar /> <Navbar />
<article> <article>
{/* {/*
<!--hersteller--> <!--hersteller-->
*/} */}
<div class="row"> <div>
<h3 id="manufacturers">Erklärung und Geschichte der Produzenten</h3> <h3 id="manufacturers">Erklärung und Geschichte der Produzenten</h3>
<p> <p>
Es gibt/gab viele Hersteller von elektrischen Einrädern, hier werden Es gibt/gab viele Hersteller von elektrischen Einrädern, hier werden
@ -24,10 +28,15 @@ function Manufacturers() {
</p> </p>
<h3 id="ninebot"> <h3 id="ninebot">
Ninebot <img class="logos" src="/images/ninebotLogo.jpg" /> Ninebot <img src="/images/ninebotLogo.jpg" />
</h3> </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> <p>
Ninebot ist für die Meisten bekannt als Scooter Hersteller, manche Ninebot ist für die Meisten bekannt als Scooter Hersteller, manche
kenne auch vielleicht deren elektrische Schuhe oder die Segway kenne auch vielleicht deren elektrische Schuhe oder die Segway
@ -42,10 +51,14 @@ function Manufacturers() {
</p> </p>
<h3 id="inmotion"> <h3 id="inmotion">
Inmotion <img class="logos" src="/images/inmotionLogo.png" /> Inmotion <img src="/images/inmotionLogo.png" />
</h3> </h3>
<img class="righties" src="/images/InmotionLineup.jpg" /> <div class="righties">
<img class="lefties" src="/images/V11 3.webp" /> <Asset src="/images/InmotionLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/V11 3.webp" />
</div>
<p> <p>
Inmotion ist der zweitgrößte Hersteller der hier gelisteten. Inmotion ist der zweitgrößte Hersteller der hier gelisteten.
Ebenfalls groß im standard-Scooter Segment, hat Inmotion aber auch Ebenfalls groß im standard-Scooter Segment, hat Inmotion aber auch
@ -65,10 +78,14 @@ function Manufacturers() {
</p> </p>
<h3 id="kingsong"> <h3 id="kingsong">
Kingsong <img class="logos" src="/images/kingsongLogo.png" /> Kingsong <img src="/images/kingsongLogo.png" />
</h3> </h3>
<img class="righties" src="/images/KidsKS16X.jpg" /> <div class="righties">
<img class="lefties" src="/images/kingsong2.jpg" /> <Asset src="/images/KidsKS16X.jpg" />
</div>
<div class="lefties">
<Asset src="/images/kingsong2.jpg" />
</div>
<p> <p>
Kingsong ist sehr ähnlich zu Inmotion, nur kleiner und ohne den Kingsong ist sehr ähnlich zu Inmotion, nur kleiner und ohne den
großen Scooter und E-Bike Markt dahinter. Qualität und Design waren großen Scooter und E-Bike Markt dahinter. Qualität und Design waren
@ -85,10 +102,14 @@ function Manufacturers() {
</p> </p>
<h3 id="begode"> <h3 id="begode">
Gotway/Begode <img class="logos" src="/images/BEGODElogo.jpg" /> Gotway/Begode <img src="/images/BEGODElogo.jpg" />
</h3> </h3>
<img class="righties" src="/images/BegodeLineup.jpg" /> <div class="righties">
<img class="lefties" src="/images/BegodeMemeBurn.jpg" /> <Asset src="/images/BegodeLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/BegodeMemeBurn.jpg" />
</div>
<p> <p>
Gotway, oder wie sie sich heute nennen, Begode, ist schwer zu Gotway, oder wie sie sich heute nennen, Begode, ist schwer zu
beschreiben und einzuordnen. Viele Meinungen und Kontroversen. Die beschreiben und einzuordnen. Viele Meinungen und Kontroversen. Die
@ -136,11 +157,14 @@ function Manufacturers() {
</p> </p>
<h3 id="veteran"> <h3 id="veteran">
Leaperkim/Veteran{" "} Leaperkim/Veteran <img src="/images/veteranLogo.png" />
<img class="logos" src="/images/veteranLogo.png" />
</h3> </h3>
<img class="righties" src="/images/Shermangrey.jpg" /> <div class="righties">
<img class="lefties" src="/images/abrahams.jpg" /> <Asset src="/images/Shermangrey.jpg" />
</div>
<div class="lefties">
<Asset src="/images/abrahams.jpg" />
</div>
<p> <p>
Veteran ist für viele der Liebling. Bestehend aus Ex Gotway Veteran ist für viele der Liebling. Bestehend aus Ex Gotway
Ingenieuren und Mitarbeitern, die mit den Entscheidungen von 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 { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import DeviceTile from "~/components/DeviceTile"; import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/de/Navbar"; import Navbar, { lightMode } from "~/components/de/Navbar";
import "~/styles/overview.scss"; import "~/styles/overview.scss";
function overview() { function overview() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Einführung EUCs</Title> <Title>Einführung EUCs</Title>
<FullscreenView />
<Navbar /> <Navbar />
<header> <header>
@ -16,7 +19,7 @@ function overview() {
{/* <!--Intro--> */} {/* <!--Intro--> */}
<article> <article>
<div class="row"> <div>
<h2>Bevor Sie lesen:</h2> <h2>Bevor Sie lesen:</h2>
<p>Hier sind ein paar Dinge, bevor Sie anfangen zu lesen.</p> <p>Hier sind ein paar Dinge, bevor Sie anfangen zu lesen.</p>
@ -48,13 +51,15 @@ function overview() {
</div> </div>
{/* <!--was sind eucs--> */} {/* <!--was sind eucs--> */}
<div class="row"> <div>
<h2>Was sind EUCs</h2> <h2>Was sind EUCs</h2>
<div class="righties"> <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> </div>
<img class="lefties" src="/images/KidsKS16X.jpg" />
<p> <p>
EUC steht für <b>E</b>lectric<b>U</b>ni<b>C</b>ycle, zu Deutsch 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 elektrisches Einrad. Im einfachsten Sinne ist es ein Akku
@ -70,21 +75,14 @@ function overview() {
</div> </div>
{/* <!--warum?--> */} {/* <!--warum?--> */}
<div class="row"> <div>
<h2 id="why">Warum Einrad fahren?</h2> <h2 id="why">Warum Einrad fahren?</h2>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/whyS22.mp4" />
<source src="/videos/whyS22.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/SkippinTrafficDanceWW.mp4" />
<source
src="/videos/SkippinTrafficDanceWW.mp4"
type="video/mp4"
/>
</video>
</div> </div>
<p> <p>
@ -168,14 +166,14 @@ function overview() {
</div> </div>
{/* <!--funktion--> */} {/* <!--funktion--> */}
<div class="row"> <div>
<h2 id="funktion">Technische Funktionsweise</h2> <h2 id="funktion">Technische Funktionsweise</h2>
<div class="righties"> <div class="righties">
<img src="/images/Funktionsblld.webp" /> <Asset src="/images/Funktionsblld.webp" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realBattery.jpg" /> <Asset src="/images/realBattery.jpg" />
</div> </div>
<p> <p>
@ -231,10 +229,10 @@ function overview() {
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/MoBo.jpg" /> <Asset src="/images/MoBo.jpg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realMoBo1.PNG" /> <Asset src="/images/realMoBo1.PNG" />
</div> </div>
<p> <p>
Das <b>Motherboard</b> besteht unter anderem aus dem Stromeingang Das <b>Motherboard</b> besteht unter anderem aus dem Stromeingang
@ -273,10 +271,10 @@ function overview() {
einstellen. einstellen.
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/Motor.jpeg" /> <Asset src="/images/Motor.jpeg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realMotor.png" /> <Asset src="/images/realMotor.png" />
</div> </div>
<p> <p>
Der <b id="motor">Motor</b> eines Einrades ist ein 3 Phasen Hub Der <b id="motor">Motor</b> eines Einrades ist ein 3 Phasen Hub
@ -330,14 +328,15 @@ function overview() {
</div> </div>
{/* <!--begriffe--> */} {/* <!--begriffe--> */}
<div class="row"> <div>
<h3 id="begriffe">Begriffs- und Spezifikationserklärungen</h3> <h3 id="begriffe">Begriffs- und Spezifikationserklärungen</h3>
<div class="col-6"> <div class="table-half">
<div>
<p> <p>
<b id="tiltback">Tilt-back</b>: Die Pedale des Geräts neigen sich <b id="tiltback">Tilt-back</b>: Die Pedale des Geräts neigen
nach hinten, um den Fahrer abzubremsen. Wird bei niedrigem Akku sich nach hinten, um den Fahrer abzubremsen. Wird bei niedrigem
stand oder zu hoher Beanspruchung benutzt, um die Elektronik zu Akku stand oder zu hoher Beanspruchung benutzt, um die
schützen. Elektronik zu schützen.
</p> </p>
<p> <p>
<b>Pedal Dip</b>: Die Pedale geben nach, das Gerät kann die <b>Pedal Dip</b>: Die Pedale geben nach, das Gerät kann die
@ -353,28 +352,28 @@ function overview() {
für längere Fahrten. für längere Fahrten.
</p> </p>
<p class="imghover"> <p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spitzen auf den Pedalen, <b id="spiked-pedals">Spiked-pedals</b>: Spitzen auf den
die Schuhen mehr Halt geben. Ähnlich zu Mountainbike Pedalen, sind Pedalen, die Schuhen mehr Halt geben. Ähnlich zu Mountainbike
es meist einschraubbare spitze Metallstifte, die sich etwas in den Pedalen, sind es meist einschraubbare spitze Metallstifte, die
Schuh bohren, um versehentliches abrutschen zu vermeiden. Wird sich etwas in den Schuh bohren, um versehentliches abrutschen zu
heute statt Schleifpapier genommen, da es auch bei Nässe und vermeiden. Wird heute statt Schleifpapier genommen, da es auch
Schlamm guten halt bietet.{" "} bei Nässe und Schlamm guten halt bietet.{" "}
<R href="https://youtu.be/aWU9lZAfKXM">Beispiel</R> <R href="https://youtu.be/aWU9lZAfKXM">Beispiel</R>
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/SpikedPedals.jpeg" /> <Asset src="/images/SpikedPedals.jpeg" />
</div> </div>
<p class="imghover"> <p class="imghover">
<b id="pads">Pads</b>: aus Plastik oder Schaumstoff bestehende <b id="pads">Pads</b>: aus Plastik oder Schaumstoff bestehende
Teile die seitlich am Gerät montiert werden, meist gedruckt aus Teile die seitlich am Gerät montiert werden, meist gedruckt aus
TPU und PLA und befestigt mit großflächigem starkem Klettband. Sie TPU und PLA und befestigt mit großflächigem starkem Klettband.
sind zur besseren Kontrolle des Gerätes, vor allem für schwere und Sie sind zur besseren Kontrolle des Gerätes, vor allem für
schnelle Einräder wichtig. Sie werden in 2 Typen aufgeteilt, wobei schwere und schnelle Einräder wichtig. Sie werden in 2 Typen
viele beides zusammen kombinieren.{" "} aufgeteilt, wobei viele beides zusammen kombinieren.{" "}
<R href="https://youtu.be/mI8IDQhXSi8">Beispiel</R> <R href="https://youtu.be/mI8IDQhXSi8">Beispiel</R>
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/Pads.jpg" /> <Asset src="/images/Pads.jpg" />
</div> </div>
<p> <p>
<b>Power Pads</b>: haben Kontakt an den Waden und dem <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. Essenziell für schwere Geräte mit hohen pedalen.
</p> </p>
<p> <p>
<b>Jump Pads</b>: haben Kontakt mit dem Fuß und der Verse, dienen <b>Jump Pads</b>: haben Kontakt mit dem Fuß und der Verse,
zum Springen und zur Sicherheit. Im Falle eines unerwarteten dienen zum Springen und zur Sicherheit. Im Falle eines
Buckels in der Straße halten sie den Fuß fest, sodass man nicht unerwarteten Buckels in der Straße halten sie den Fuß fest,
vom Gerät fällt. Allerdings können sie im Falle eines Crashes sodass man nicht vom Gerät fällt. Allerdings können sie im Falle
hinderlich sein, da sie ein schnelles Absteigen erschweren. eines Crashes hinderlich sein, da sie ein schnelles Absteigen
erschweren.
</p> </p>
<p> <p>
<b>Wobbles</b>: beschreibt das unbeabsichtigte Wackeln des Geräts <b>Wobbles</b>: beschreibt das unbeabsichtigte Wackeln des
bei höherer Geschwindigkeit. Mehr dazu <R href="#wobbles">hier</R> Geräts bei höherer Geschwindigkeit. Mehr dazu{" "}
<R href="#wobbles">hier</R>
</p> </p>
</div> </div>
<div class="col-6"> <div>
<p class="imghover"> <p class="imghover">
<b id="trolley">Trolley Handle</b>: ein ausfahrbarer Griff zum <b id="trolley">Trolley Handle</b>: ein ausfahrbarer Griff zum
Schieben des Gerätes, ähnlich wie bei einem Koffer. Schieben des Gerätes, ähnlich wie bei einem Koffer.
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/KidsKS16X.jpg" /> <Asset src="/images/KidsKS16X.jpg" />
</div> </div>
<p> <p>
@ -425,14 +426,14 @@ function overview() {
</p> </p>
<p> <p>
<b>W</b>: Watt, Leistungsangabe, zeigt wie viel Leistung das Gerät <b>W</b>: Watt, Leistungsangabe, zeigt wie viel Leistung das
dauerhaft halten kann. 3.000 W entsprechen 4 PS (ein E-Bike hat Gerät dauerhaft halten kann. 3.000 W entsprechen 4 PS (ein
maximal 250 W). Nicht zu verwechseln mit E-Bike hat maximal 250 W). Nicht zu verwechseln mit
</p> </p>
<p> <p>
<b>Peak Watt</b>: Maximale Leistung, die das Gerät für sehr kurze <b>Peak Watt</b>: Maximale Leistung, die das Gerät für sehr
Zeit erreichen kann. kurze Zeit erreichen kann.
</p> </p>
<p> <p>
@ -448,31 +449,32 @@ function overview() {
</p> </p>
<p> <p>
<b>Voltage sag</b>: Spannungsabfall, der Akku verliert kurzzeitig <b>Voltage sag</b>: Spannungsabfall, der Akku verliert
bei hoher Beanspruchung an Spannung, was bei gleicher Leistung die kurzzeitig bei hoher Beanspruchung an Spannung, was bei gleicher
fließenden Ampere erhöht. Leistung die fließenden Ampere erhöht.
</p> </p>
<p> <p>
<b>Freespin</b>: Maximale Dreh Geschwindigkeit, die der Motor <b>Freespin</b>: Maximale Dreh Geschwindigkeit, die der Motor
erreichen kann, wenn man das Gerät anhebt. Minus 20 km/h rechnen, erreichen kann, wenn man das Gerät anhebt. Minus 20 km/h
um ungefähr die erreichbare top Geschwindigkeit zu bekommen. rechnen, um ungefähr die erreichbare top Geschwindigkeit zu
bekommen.
</p> </p>
<p> <p>
<b>16 inch</b>: beschreibt die Reifen Größe, in dem Fall 16 Zoll <b>16 inch</b>: beschreibt die Reifen Größe, in dem Fall 16 Zoll
(40 cm) Durchmesser. Kleine Durchmesser sind wendig und haben ein (40 cm) Durchmesser. Kleine Durchmesser sind wendig und haben
schnelles Ansprechverhalten, große Durchmesser (bis 24 Zoll, 60 ein schnelles Ansprechverhalten, große Durchmesser (bis 24 Zoll,
cm) fühlen sich schwer und träge an, sind aber erheblich stabiler 60 cm) fühlen sich schwer und träge an, sind aber erheblich
auf Geschwindigkeit. stabiler auf Geschwindigkeit.
</p> </p>
<div> <div>
<p> <p>
<b>Charging Amps</b>: Die maximalen Ampere, mit denen das Gerät <b>Charging Amps</b>: Die maximalen Ampere, mit denen das
laden kann. Die meisten neuen Geräte laden mit maximal 10 Gerät laden kann. Die meisten neuen Geräte laden mit maximal
Ampere, also 10 A * 126 V = 1.260 Watt. Die Ladezeit errechnet 10 Ampere, also 10 A * 126 V = 1.260 Watt. Die Ladezeit
man so: errechnet man so:
</p> </p>
<table style={{ width: "100%" }}> <table style={{ width: "100%" }}>
@ -500,9 +502,10 @@ function overview() {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* <!--sicherheit--> */} {/* <!--sicherheit--> */}
<div class="row"> <div>
<h2 id="sicherheit">Sicherheit</h2> <h2 id="sicherheit">Sicherheit</h2>
<p> <p>
Die wohl zweit häufigste Frage ist meist, ob man darauf denn nicht Die wohl zweit häufigste Frage ist meist, ob man darauf denn nicht
@ -516,13 +519,13 @@ function overview() {
</div> </div>
{/* <!--ausrüstung--> */} {/* <!--ausrüstung--> */}
<div class="row"> <div>
<h3 id="ausrüstung">Schutzausrüstung</h3> <h3 id="ausrüstung">Schutzausrüstung</h3>
<div class="righties"> <div class="righties">
<img src="/images/Gear2.jpg" /> <Asset src="/images/Gear2.jpg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/Gear1.jpg" /> <Asset src="/images/Gear1.jpg" />
</div> </div>
<p> <p>
Jeder EUC-YouTuber und erfahrene Fahrer wird dir sagen, dass Jeder EUC-YouTuber und erfahrene Fahrer wird dir sagen, dass
@ -577,17 +580,15 @@ function overview() {
auch keinen Fahrradhelm tragen. auch keinen Fahrradhelm tragen.
</p> </p>
<div> <div>
<img src="/images/Gear3.webp" /> <Asset src="/images/Gear3.webp" />
</div> </div>
</div> </div>
{/* <!--cut-offs--> */} {/* <!--cut-offs--> */}
<div class="row"> <div>
<h3 id="cutout">Cut-offs</h3> <h3 id="cutout">Cut-offs</h3>
<div class="righties"> <div class="righties">
<video autoplay muted loop> <Asset src="/videos/Cutout1.mp4" />
<source src="/videos/Cutout1.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
Cut-offs sind die größte Quelle der nicht eigenverantwortlichen Cut-offs sind die größte Quelle der nicht eigenverantwortlichen
@ -663,7 +664,7 @@ function overview() {
</div> </div>
{/* <!--akkusicheit--> */} {/* <!--akkusicheit--> */}
<div class="row"> <div>
<h3 id="akkuss">Brände, Akkusicherheit</h3> <h3 id="akkuss">Brände, Akkusicherheit</h3>
<p> <p>
Vorweg: im Gegensatz zu z.B. Hoverboards sind Einräder recht sicher 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. ist die Sorge auch für andere Marken da.
</p> </p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/shortS22Fire.MP4" />
<source src="/videos/shortS22Fire.MP4" type="video/mp4" /> </div>
</video> <div class="lefties">
<Asset src="/images/burned.png" />
</div> </div>
<img class="lefties" src="/images/burned.png" />
<p> <p>
<b>Brandursachen</b> können mehrere sein, hier ein paar Beispiele: <b>Brandursachen</b> können mehrere sein, hier ein paar Beispiele:
</p> </p>
@ -735,7 +736,7 @@ function overview() {
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/BMS.jpg" /> <Asset src="/images/BMS.jpg" />
</div> </div>
<p> <p>
<b>Akkusicherheit</b>: Dafür ist ein <b id="BMS">BMS</b> zuständig. <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, - ihn auch nicht über die maximale Spannung laden zu lassen,
<br /> <br />
- die Temperatur im Blick zu halten und - die Temperatur im Blick zu halten und
<br /> <br />- im Falle eines Kurzschlusses sich vom restlichen System zu
-im Falle eines Kurzschlusses sich vom restlichen System zu trennen. trennen.
</p> </p>
<p> <p>
Bessere BMSs, auch smart BMS genannt, können auch aktiv die Zellen Bessere BMSs, auch smart BMS genannt, können auch aktiv die Zellen
@ -770,17 +771,13 @@ function overview() {
</div> </div>
{/* <!--fahrweise--> */} {/* <!--fahrweise--> */}
<div class="row"> <div>
<h3 id="fahrweise">Fahrweise</h3> <h3 id="fahrweise">Fahrweise</h3>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC.mp4" />
<source src="/videos/FahrweiseNYC.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC4bad.mp4" />
<source src="/videos/FahrweiseNYC4bad.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
Das wohl mit Abstand größte Sicherheitsrisiko bildet die Fahrweise 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. sind mit dem richtigen Skill zu unglaublichem im Stande.
</p> </p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC2.mp4" />
<source src="/videos/FahrweiseNYC2.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC3.mp4" />
<source src="/videos/FahrweiseNYC3.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
<b>Unfälle</b> an sich sind hier auch noch mal zu erwähnen, denn es <b>Unfälle</b> an sich sind hier auch noch mal zu erwähnen, denn es
@ -860,12 +853,10 @@ function overview() {
</div> </div>
{/* <!--wobbles--> */} {/* <!--wobbles--> */}
<div class="row"> <div>
<h3 id="wobbles">Wobbles</h3> <h3 id="wobbles">Wobbles</h3>
<div class="righties"> <div class="righties">
<video id="vwobble" autoplay muted loop> <Asset src="/videos/Whobble2.mp4" />
<source src="/videos/Whobble2.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
Wobbles sind ein noch nicht ganz verstandenes Problem. Wobble Wobbles sind ein noch nicht ganz verstandenes Problem. Wobble
@ -901,7 +892,7 @@ function overview() {
</div> </div>
{/* <!--leistng--> */} {/* <!--leistng--> */}
<div class="row"> <div>
<h3 id="leistung">Leistung als Sicherheitsfeature</h3> <h3 id="leistung">Leistung als Sicherheitsfeature</h3>
<p> <p>
@ -921,7 +912,7 @@ function overview() {
</div> </div>
{/* <!--federung--> */} {/* <!--federung--> */}
<div class="row"> <div>
<h3 id="federung">Federung als Sicherheitsfeature</h3> <h3 id="federung">Federung als Sicherheitsfeature</h3>
<p> <p>
Fast alle neuen und angekündigten Geräte haben eine Art integrierte Fast alle neuen und angekündigten Geräte haben eine Art integrierte
@ -943,9 +934,9 @@ function overview() {
</div> </div>
{/* <!--reifen--> */} {/* <!--reifen--> */}
<div class="row"> <div>
<h3 id="reifen">Reifen</h3> <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>Reifen werden unterteilt in 3 Kategorien:</p>
<p> <p>
@ -986,13 +977,15 @@ function overview() {
</div> </div>
{/* <!--historie--> */} {/* <!--historie--> */}
<div class="row"> <div>
<h2 id="historie">Historie der EUCs</h2> <h2 id="historie">Historie der EUCs</h2>
<div class="righties"> <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> </div>
<img class="lefties" src="/images/historieEUC.webp" />
<p> <p>
Die Grundlegende Technik kam mit dem Die Grundlegende Technik kam mit dem
<R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter"> <R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@ -1013,7 +1006,7 @@ function overview() {
<p> <p>
Es dauerte weitere 4 Jahre, bis Es dauerte weitere 4 Jahre, bis
<R href="#kinsong"> <R href="/de/manufacturers#kinsong">
<b>KingSong</b> <b>KingSong</b>
</R> </R>
gegründet wurde, und als Wettbewerber Innovation antrieb. gegründet wurde, und als Wettbewerber Innovation antrieb.
@ -1034,8 +1027,8 @@ function overview() {
mehr Gedanken in Design und Qualität steckten. mehr Gedanken in Design und Qualität steckten.
</p> </p>
<div class="righties"> <div class="lefties">
<img src="/images/z10.jpeg" /> <Asset src="/images/z10.jpeg" />
</div> </div>
<p> <p>
<R href="#ninebot"> <R href="#ninebot">
@ -1061,8 +1054,8 @@ function overview() {
veröffentlichten. Und beide Geräte änderten den Markt nachhaltig. veröffentlichten. Und beide Geräte änderten den Markt nachhaltig.
</p> </p>
<div class="righties"> <div class="lefties">
<img src="/images/S22shutterkode1.jpg" /> <Asset src="/images/S22shutterkode1.jpg" />
</div> </div>
<p> <p>
Inmotion und Kingsong haben beide relativ zeitnah die ersten Geräte Inmotion und Kingsong haben beide relativ zeitnah die ersten Geräte
@ -1110,14 +1103,14 @@ function overview() {
</div> </div>
{/* <!--auflistung--> */} {/* <!--auflistung--> */}
<div class="row"> <div>
<h2 id="geräte">Liste der Geräte</h2> <h2 id="geraete">Liste der Geräte</h2>
<p> <p>
Hier werden nur die relevantesten und bekanntesten Geräte Hier werden nur die relevantesten und bekanntesten Geräte
aufgelistet, eine vollständige sortierbare Übersicht ist{" "} aufgelistet, eine vollständige sortierbare Übersicht ist{" "}
<R href="https://www.electricunicycles.eu/product_catalog">hier</R>. <R href="https://www.electricunicycles.eu/product_catalog">hier</R>.
</p> </p>
<div class="raster">
<DeviceTile <DeviceTile
href="/de/KSS22" href="/de/KSS22"
name="Kingsong S22" name="Kingsong S22"
@ -1148,11 +1141,21 @@ function overview() {
<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> </div>
</article> </article>
<footer /> <footer />

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

@ -1,22 +1,24 @@
import { Body, Title } from "solid-start"; 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"; import "~/styles/devices.scss";
function KSS22() { function KSS22() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="devices" classList={{ "light-mode": lightMode() }}>
<Title>KS S22</Title> <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> <article>
<div>
<h2>Kingsong S22</h2> <h2>Kingsong S22</h2>
<div class="righties">
<Asset src="/images/KSS22/S22shutterkode2.jpg" />
</div>
<p> <p>
The Kingsong S22, formerly S20, is a clearly off-road and The Kingsong S22, formerly S20, is a clearly off-road and
trail-oriented unicycle. Among other things, it has 130 mm trail-oriented unicycle. Among other things, it has 130 mm
@ -25,10 +27,10 @@ function KSS22() {
</p> </p>
<p> <p>
It is the successor to the smaller S18, but with double the It is the successor to the smaller S18, but with double the battery
battery and 50 % more motor power, such as a top speed of 70 and 50 % more motor power, such as a top speed of 70 instead of 50
instead of 50 km/h. The freespin is up to 114 km/h, so ideal for km/h. The freespin is up to 114 km/h, so ideal for longer jumps
longer jumps where the tire is spinning up in the air. where the tire is spinning up in the air.
</p> </p>
<p> <p>
@ -37,8 +39,8 @@ function KSS22() {
short trolley handle, as well as a sturdy kickstand and short trolley handle, as well as a sturdy kickstand and
height-adjustable bright lights. It's waterproof, but not height-adjustable bright lights. It's waterproof, but not
submersible, and best of all, it's super easy to work with because submersible, and best of all, it's super easy to work with because
the device has a very modular design. The tire can theoretically the device has a very modular design. The tire can theoretically be
be removed with just 2 screws removed with just 2 screws
</p> </p>
<p> <p>
@ -47,28 +49,26 @@ function KSS22() {
problems with the first devices, which led to cut-offs and burned problems with the first devices, which led to cut-offs and burned
the motherboard. Also, the slider design is very clumsy and gets the motherboard. Also, the slider design is very clumsy and gets
harder and harder to move over time. Many S22 buyers had to wait a harder and harder to move over time. Many S22 buyers had to wait a
long time for replacement motors, such as upgrading the sliders long time for replacement motors, such as upgrading the sliders for
for 100 to 200 €. However, with the upgrades, it is currently the 100 to 200 €. However, with the upgrades, it is currently the best
best suspension unicycle on the market. (Until the Veteran Sherman suspension unicycle on the market. (Until the Veteran Sherman S goes
S goes on sale.) on sale.)
</p> </p>
</article>
</div>
</div> </div>
<div class="row"> <div class="grid">
<div class="col-4"> <Asset src="/images/KSS22/S22shutterkode5.jpg" />
<img src="/images/KSS22/S22shutterkode5.jpg" /> <Asset class="span-2" src="/images/KSS22/BusJump.jpg" />
</div> <Asset src="/images/KSS22/S22shutterkode4.jpg" />
<div class="col-4">
<img src="/images/KSS22/BusJump.jpg" />
</div>
<div class="col-4">
<img src="/images/KSS22/S22shutterkode4.jpg" />
</div>
</div> </div>
<table> <table>
<thead>
<tr>
<th>Attribute</th>
<th>Value</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<td>Size</td> <td>Size</td>
@ -212,6 +212,7 @@ function KSS22() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</article>
</Body> </Body>
); );
} }

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

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

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

@ -1,19 +1,22 @@
import { Body, Title } from "solid-start"; import { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar"; import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss"; import "~/styles/overview.scss";
function Manufacturers() { function Manufacturers() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Manufacturers</Title> <Title>Manufacturers</Title>
<FullscreenView />
<Navbar /> <Navbar />
<article> <article>
{/* {/*
<!--hersteller--> <!--hersteller-->
*/} */}
<div class="row"> <div>
<h3 id="manufacturers">History and explanation of manufacturers</h3> <h3 id="manufacturers">History and explanation of manufacturers</h3>
<p> <p>
There are/were many manufacturers of electric unicycles, only the There are/were many manufacturers of electric unicycles, only the
@ -25,10 +28,14 @@ function Manufacturers() {
</p> </p>
<h3 id="ninebot"> <h3 id="ninebot">
Ninebot <img class="logos" src="/images/ninebotLogo.jpg" /> Ninebot <img src="/images/ninebotLogo.jpg" />
</h3> </h3>
<img class="righties" src="/images/NineBot.webp" /> <div class="righties">
<img class="lefties" src="/images/NinebotZ10goood.webp" /> <Asset src="/images/NineBot.webp" />
</div>
<div class="lefties">
<Asset src="/images/NinebotZ10goood.webp" />
</div>
<p> <p>
Ninebot is known to most as a sooter manufacturer, some may also Ninebot is known to most as a sooter manufacturer, some may also
know their electric shoes or Segway-like devices with short know their electric shoes or Segway-like devices with short
@ -42,10 +49,14 @@ function Manufacturers() {
</p> </p>
<h3 id="inmotion"> <h3 id="inmotion">
Inmotion <img class="logos" src="/images/inmotionLogo.png" /> Inmotion <img src="/images/inmotionLogo.png" />
</h3> </h3>
<img class="righties" src="/images/InmotionLineup.jpg" /> <div class="righties">
<img class="lefties" src="/images/V11 3.webp" /> <Asset src="/images/InmotionLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/V11 3.webp" />
</div>
<p> <p>
Inmotion is the second largest manufacturer of those listed here. Inmotion is the second largest manufacturer of those listed here.
Also big in the standard scooter segment, Inmotion also has a large Also big in the standard scooter segment, Inmotion also has a large
@ -63,10 +74,14 @@ function Manufacturers() {
</p> </p>
<h3 id="kingsong"> <h3 id="kingsong">
Kingsong <img class="logos" src="/images/kingsongLogo.png" /> Kingsong <img src="/images/kingsongLogo.png" />
</h3> </h3>
<img class="righties" src="/images/KidsKS16X.jpg" /> <div class="righties">
<img class="lefties" src="/images/kingsong2.jpg" /> <Asset src="/images/KidsKS16X.jpg" />
</div>
<div class="lefties">
<Asset src="/images/kingsong2.jpg" />
</div>
<p> <p>
Kingsong is very similar to Inmotion, only smaller and without the Kingsong is very similar to Inmotion, only smaller and without the
big scooter and e-bike market behind it. Quality and design were the big scooter and e-bike market behind it. Quality and design were the
@ -83,10 +98,14 @@ function Manufacturers() {
</p> </p>
<h3 id="begode"> <h3 id="begode">
Gotway/Begode <img class="logos" src="/images/BEGODElogo.jpg" /> Gotway/Begode <img src="/images/BEGODElogo.jpg" />
</h3> </h3>
<img class="righties" src="/images/BegodeLineup.jpg" /> <div class="righties">
<img class="lefties" src="/images/BegodeMemeBurn.jpg" /> <Asset src="/images/BegodeLineup.jpg" />
</div>
<div class="lefties">
<Asset src="/images/BegodeMemeBurn.jpg" />
</div>
<p> <p>
Gotway, or Begode as they call themselves today, is difficult to Gotway, or Begode as they call themselves today, is difficult to
describe and classify. Many opinions and controversies. The company describe and classify. Many opinions and controversies. The company
@ -132,11 +151,14 @@ function Manufacturers() {
</p> </p>
<h3 id="veteran"> <h3 id="veteran">
Leaperkim/Veteran{" "} Leaperkim/Veteran <img src="/images/veteranLogo.png" />
<img class="logos" src="/images/veteranLogo.png" />
</h3> </h3>
<img class="righties" src="/images/Shermangrey.jpg" /> <div class="righties">
<img class="lefties" src="/images/abrahams.jpg" /> <Asset src="/images/Shermangrey.jpg" />
</div>
<div class="lefties">
<Asset src="/images/abrahams.jpg" />
</div>
<p> <p>
Veteran is the favorite for many. Comprised of ex-Gotway engineers Veteran is the favorite for many. Comprised of ex-Gotway engineers
and employees who disagreed with Gotway's decisions, Veteran 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 { Body, Title } from "solid-start";
import AssetHandler from "~/components/Asset";
import DeviceTile from "~/components/DeviceTile"; import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference"; import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar"; import Navbar, { lightMode } from "~/components/en/Navbar";
import "~/styles/overview.scss"; import "~/styles/overview.scss";
function Overview() { function Overview() {
const { FullscreenView, Asset } = AssetHandler();
return ( return (
<Body classList={{ "light-mode": lightMode() }}> <Body class="overview" classList={{ "light-mode": lightMode() }}>
<Title>Introduction EUCs</Title> <Title>Introduction EUCs</Title>
<FullscreenView />
<Navbar /> <Navbar />
<header> <header>
@ -17,7 +20,7 @@ function Overview() {
<!--Intro--> <!--Intro-->
*/} */}
<article> <article>
<div class="row"> <div>
<h2>Before you read:</h2> <h2>Before you read:</h2>
<p>Here are a few things before you start to read.</p> <p>Here are a few things before you start to read.</p>
<p> <p>
@ -48,13 +51,15 @@ function Overview() {
{/* {/*
<!--was sind eucs--> <!--was sind eucs-->
*/} */}
<div class="row"> <div>
<h2>What are EUCs</h2> <h2>What are EUCs</h2>
<div class="righties"> <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> </div>
<img class="lefties" src="/images/KidsKS16X.jpg" />
<p> <p>
EUC stands for <b>E</b>lectric<b>U</b>ni<b>C</b>ycle. In simplest 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, terms it's a battery powered motor surrounded by a motorcycle tire,
@ -70,21 +75,14 @@ function Overview() {
{/* {/*
<!--warum?--> <!--warum?-->
*/} */}
<div class="row"> <div>
<h2 id="why">Why ride a unicycle?</h2> <h2 id="why">Why ride a unicycle?</h2>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/whyS22.mp4" />
<source src="/videos/whyS22.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/SkippinTrafficDanceWW.mp4" />
<source
src="/videos/SkippinTrafficDanceWW.mp4"
type="video/mp4"
/>
</video>
</div> </div>
<p> <p>
@ -170,14 +168,14 @@ function Overview() {
{/* {/*
<!--funktion--> <!--funktion-->
*/} */}
<div class="row"> <div>
<h2 id="funktion">Technical functionality</h2> <h2 id="funktion">Technical functionality</h2>
<div class="righties"> <div class="righties">
<img src="/images/Funktionsblld.webp" /> <Asset src="/images/Funktionsblld.webp" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realBattery.jpg" /> <Asset src="/images/realBattery.jpg" />
</div> </div>
<p> <p>
@ -232,10 +230,10 @@ function Overview() {
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/MoBo.jpg" /> <Asset src="/images/MoBo.jpg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realMoBo1.PNG" /> <Asset src="/images/realMoBo1.PNG" />
</div> </div>
<p> <p>
The <b>motherboard</b> consists of, among other things, the power The <b>motherboard</b> consists of, among other things, the power
@ -273,10 +271,10 @@ function Overview() {
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/Motor.jpeg" /> <Asset src="/images/Motor.jpeg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/realMotor.png" /> <Asset src="/images/realMotor.png" />
</div> </div>
<p> <p>
The <b id="motor">motor</b> of a unicycle is a 3-phase hub motor, The <b id="motor">motor</b> of a unicycle is a 3-phase hub motor,
@ -333,21 +331,23 @@ function Overview() {
{/* {/*
<!--begriffe--> <!--begriffe-->
*/} */}
<div class="row"> <div>
<h3 id="begriffe">Glossary and specification explanation</h3> <h3 id="begriffe">Glossary and specification explanation</h3>
<div class="col-6"> <div class="table-half">
<div>
<p> <p>
<b id="tiltback">Tilt-back</b>: The device's pedals tilt backwards <b id="tiltback">Tilt-back</b>: The device's pedals tilt
to slow the rider down. Used when the battery is low or when the backwards to slow the rider down. Used when the battery is low
power demand is too high, to protect the electronics. or when the power demand is too high, to protect the
electronics.
</p> </p>
<p> <p>
<b id="pedaldip">Pedal Dip</b>: The pedals dip forwards, the <b id="pedaldip">Pedal Dip</b>: The pedals dip forwards, the
device cannot maintain the requested power and the pedals suddenly device cannot maintain the requested power and the pedals
tilt forward (or backward under heavy braking). In most cases, suddenly tilt forward (or backward under heavy braking). In most
however, the pedals come up again immediately, so that the ride cases, however, the pedals come up again immediately, so that
can continue undisturbed (implies necessary skill). the ride can continue undisturbed (implies necessary skill).
</p> </p>
<p> <p>
@ -358,33 +358,33 @@ function Overview() {
</p> </p>
<p class="imghover"> <p class="imghover">
<b id="spiked-pedals">Spiked-pedals</b>: Spikes on the pedals that <b id="spiked-pedals">Spiked-pedals</b>: Spikes on the pedals
give shoes more grip. Similar to mountain bike pedals, there are that give shoes more grip. Similar to mountain bike pedals,
usually screw-in pointed metal pins that grip into the shoe to there are usually screw-in pointed metal pins that grip into the
prevent accidental slipping. It's used today instead of sandpaper, shoe to prevent accidental slipping. It's used today instead of
as it offers an excellent grip even in wet and muddy conditions.{" "} sandpaper, as it offers an excellent grip even in wet and muddy
<R href="https://youtu.be/aWU9lZAfKXM">Example</R> conditions. <R href="https://youtu.be/aWU9lZAfKXM">Example</R>
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/SpikedPedals.jpeg" /> <Asset src="/images/SpikedPedals.jpeg" />
</div> </div>
<p class="imghover"> <p class="imghover">
<b id="pads">Pads</b>: parts made of plastic or foam that are <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 mounted on the side of the device, usually printed from TPU and
PLA and fastened with large, strong Velcro. They are necessary for PLA and fastened with large, strong Velcro. They are necessary
better control and handling, especially for heavy and fast for better control and handling, especially for heavy and fast
unicycles. They are divided into 2 types; many are combined unicycles. They are divided into 2 types; many are combined
together in one set. together in one set.
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/Pads.jpg" /> <Asset src="/images/Pads.jpg" />
</div> </div>
<p> <p>
<b>Power Pads</b>: have contact with the shin and the calves, are <b>Power Pads</b>: have contact with the shin and the calves,
used for better acceleration and braking. Essential for heavy EUCs are used for better acceleration and braking. Essential for
with high pedals. heavy EUCs with high pedals.
</p> </p>
<p> <p>
@ -396,18 +396,19 @@ function Overview() {
</p> </p>
<p> <p>
<b>Wobbles</b>: describes the unintentional wobbling of the device <b>Wobbles</b>: describes the unintentional wobbling of the
at higher speeds. More on this <R href="#wobbles">here</R> device at higher speeds. More on this{" "}
<R href="#wobbles">here</R>
</p> </p>
</div> </div>
<div class="col-6"> <div>
<p class="imghover"> <p class="imghover">
<b id="trolley">Trolley Handle</b>: an extendable handle for <b id="trolley">Trolley Handle</b>: an extendable handle for
pushing the device, similar to a suitcase. pushing the device, similar to a suitcase.
</p> </p>
<div class="hidden"> <div class="hidden">
<img src="/images/KidsKS16X.jpg" /> <Asset src="/images/KidsKS16X.jpg" />
</div> </div>
<p> <p>
@ -444,8 +445,8 @@ function Overview() {
<p> <p>
<b id="wh">Wh</b>: Watt-hours, energy storage information, shows <b id="wh">Wh</b>: Watt-hours, energy storage information, shows
how much energy the <R href="#akku">battery</R> can store. 3,000 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 Wh means the battery could give 3,000 W for over an hour, or
W for 2 hours etc. 1,500 W for 2 hours etc.
</p> </p>
<p> <p>
@ -454,8 +455,8 @@ function Overview() {
</p> </p>
<p> <p>
<b>Voltage sag</b>: Voltage drop, the battery loses voltage for a <b>Voltage sag</b>: Voltage drop, the battery loses voltage for
short period of time under high load, which increases the amps a short period of time under high load, which increases the amps
flowing when the same power is requested. flowing when the same power is requested.
</p> </p>
@ -468,15 +469,15 @@ function Overview() {
<p> <p>
<b>16 inch</b>: describes the tire size, in this case 16 inches <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 (40 cm) in diameter. Small diameters are agile and have a quick
response, large diameters (up to 24 inches, 60 cm) feel heavy and response, large diameters (up to 24 inches, 60 cm) feel heavy
sluggish but are significantly more stable at speed. and sluggish but are significantly more stable at speed.
</p> </p>
<div> <div>
<p> <p>
<b>Charging Amps</b>: The maximum amps that the device can <b>Charging Amps</b>: The maximum amps that the device can
charge with. Most new devices charge with a maximum of 10 amps, charge with. Most new devices charge with a maximum of 10
i.e., 10 A * 126 V = 1,260 watts. The charging time is amps, i.e., 10 A * 126 V = 1,260 watts. The charging time is
calculated as follows: calculated as follows:
</p> </p>
@ -505,11 +506,12 @@ function Overview() {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* {/*
<!--sicherheit--> <!--sicherheit-->
*/} */}
<div class="row"> <div>
<h2 id="sicherheit">Safety</h2> <h2 id="sicherheit">Safety</h2>
<p> <p>
The second most common question is usually whether you don't just The second most common question is usually whether you don't just
@ -524,13 +526,13 @@ function Overview() {
{/* {/*
<!--ausrüstung--> <!--ausrüstung-->
*/} */}
<div class="row"> <div>
<h3 id="ausrüstung">Safety gear</h3> <h3 id="ausrüstung">Safety gear</h3>
<div class="righties"> <div class="righties">
<img src="/images/Gear2.jpg" /> <Asset src="/images/Gear2.jpg" />
</div> </div>
<div class="lefties"> <div class="lefties">
<img src="/images/Gear1.jpg" /> <Asset src="/images/Gear1.jpg" />
</div> </div>
<p> <p>
Any EUC YouTuber and experienced rider will tell you that protective Any EUC YouTuber and experienced rider will tell you that protective
@ -580,19 +582,17 @@ function Overview() {
a Master Pro with 100 km/h. a Master Pro with 100 km/h.
</p> </p>
<div> <div>
<img src="/images/Gear3.webp" /> <Asset src="/images/Gear3.webp" />
</div> </div>
</div> </div>
{/* {/*
<!--cut-offs--> <!--cut-offs-->
*/} */}
<div class="row"> <div>
<h3 id="cutout">Cut-offs</h3> <h3 id="cutout">Cut-offs</h3>
<div class="righties"> <div class="righties">
<video autoplay muted loop> <Asset src="/videos/Cutout1.mp4" />
<source src="/videos/Cutout1.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
Cut-offs are the largest source of accidents the rider is mostly not Cut-offs are the largest source of accidents the rider is mostly not
@ -667,7 +667,7 @@ function Overview() {
{/* {/*
<!--akkusicheit--> <!--akkusicheit-->
*/} */}
<div class="row"> <div>
<h3 id="akkuss">Battery safety and fires</h3> <h3 id="akkuss">Battery safety and fires</h3>
<p> <p>
First of all: in contrast to for example hoverboards, unicycles are 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. , the worry is now also there for other brands.
</p> </p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/shortS22Fire.MP4" />
<source src="/videos/shortS22Fire.MP4" type="video/mp4" /> </div>
</video> <div class="lefties">
<Asset src="/images/burned.png" />
</div> </div>
<img class="lefties" src="/images/burned.png" />
<p> <p>
There are several <b>causes</b>, here are a few examples: There are several <b>causes</b>, here are a few examples:
</p> </p>
@ -740,7 +740,7 @@ function Overview() {
</p> </p>
<div class="righties"> <div class="righties">
<img src="/images/BMS.jpg" /> <Asset src="/images/BMS.jpg" />
</div> </div>
<p> <p>
<b>Battery safety</b>: A <b id="BMS">BMS</b> is responsible for <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, - not to charge it beyond the maximum voltage,
<br /> <br />
- keep an eye on the temperature and - keep an eye on the temperature and
<br /> <br />- disconnect from the rest of the system in the event of a
-disconnect from the rest of the system in the event of a short short circuit.
circuit.
</p> </p>
<p> <p>
Better BMS's, also known as smart BMS, can also actively adjust the Better BMS's, also known as smart BMS, can also actively adjust the
@ -778,17 +777,13 @@ function Overview() {
{/* {/*
<!--fahrweise--> <!--fahrweise-->
*/} */}
<div class="row"> <div>
<h3 id="fahrweise">Ride style</h3> <h3 id="fahrweise">Ride style</h3>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC.mp4" />
<source src="/videos/FahrweiseNYC.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC4bad.mp4" />
<source src="/videos/FahrweiseNYC4bad.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
By far the greatest safety risk is the rider's riding style. Similar By far the greatest safety risk is the rider's riding style. Similar
@ -827,14 +822,10 @@ function Overview() {
of incredible things. of incredible things.
</p> </p>
<div class="righties"> <div class="righties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC2.mp4" />
<source src="/videos/FahrweiseNYC2.mp4" type="video/mp4" />
</video>
</div> </div>
<div class="lefties"> <div class="lefties">
<video width="auto" height="auto" autoplay muted loop> <Asset src="/videos/FahrweiseNYC3.mp4" />
<source src="/videos/FahrweiseNYC3.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
<b>Accidents</b> themselves are also worth mentioning here, because <b>Accidents</b> themselves are also worth mentioning here, because
@ -867,12 +858,10 @@ function Overview() {
{/* {/*
<!--wobbles--> <!--wobbles-->
*/} */}
<div class="row"> <div>
<h3 id="wobbles">Wobbles</h3> <h3 id="wobbles">Wobbles</h3>
<div class="righties"> <div class="righties">
<video id="vwobble" autoplay muted loop> <Asset src="/videos/Whobble2.mp4" />
<source src="/videos/Whobble2.mp4" type="video/mp4" />
</video>
</div> </div>
<p> <p>
Wobbles are a problem not fully understood yet. Wobble describes the{" "} Wobbles are a problem not fully understood yet. Wobble describes the{" "}
@ -907,7 +896,7 @@ function Overview() {
{/* {/*
<!--leistng--> <!--leistng-->
*/} */}
<div class="row"> <div>
<h3 id="leistung">Performance as a safety feature</h3> <h3 id="leistung">Performance as a safety feature</h3>
<p> <p>
@ -928,7 +917,7 @@ function Overview() {
{/* {/*
<!--federung--> <!--federung-->
*/} */}
<div class="row"> <div>
<h3 id="federung">Suspension as a safety feature</h3> <h3 id="federung">Suspension as a safety feature</h3>
<p> <p>
Almost all new and announced devices have some form of built-in Almost all new and announced devices have some form of built-in
@ -950,9 +939,9 @@ function Overview() {
{/* {/*
<!--reifen--> <!--reifen-->
*/} */}
<div class="row"> <div>
<h3 id="reifen">Tires</h3> <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>Tires can be divided into 3 categories:</p>
<p> <p>
@ -998,13 +987,15 @@ function Overview() {
{/* {/*
<!--historie--> <!--historie-->
*/} */}
<div class="row"> <div>
<h2 id="historie">History of EUCs</h2> <h2 id="historie">History of EUCs</h2>
<div class="righties"> <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> </div>
<img class="lefties" src="/images/historieEUC.webp" />
<p> <p>
The underlying technique came with the The underlying technique came with the
<R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter"> <R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@ -1026,7 +1017,7 @@ function Overview() {
<p> <p>
It took another 4 years for It took another 4 years for
<R href="#kinsong"> <R href="/de/manufacturers#kinsong">
<b>KingSong</b> <b>KingSong</b>
</R> </R>
to be foundet and driving innovation as a competitor. to be foundet and driving innovation as a competitor.
@ -1047,8 +1038,8 @@ function Overview() {
thought into design and quality. thought into design and quality.
</p> </p>
<div class="righties"> <div class="lefties">
<img src="/images/z10.jpeg" /> <Asset src="/images/z10.jpeg" />
</div> </div>
<p> <p>
<R href="#ninebot"> <R href="#ninebot">
@ -1073,8 +1064,8 @@ function Overview() {
both devices are changing the market forever. both devices are changing the market forever.
</p> </p>
<div class="righties"> <div class="lefties">
<img src="/images/S22shutterkode1.jpg" /> <Asset src="/images/S22shutterkode1.jpg" />
</div> </div>
<p> <p>
Inmotion and Kingsong both released the first devices with{" "} Inmotion and Kingsong both released the first devices with{" "}
@ -1122,14 +1113,15 @@ function Overview() {
{/* {/*
<!--auflistung--> <!--auflistung-->
*/} */}
<div class="row"> <div>
<h2 id="geräte">List of devices</h2> <h2 id="geraete">List of devices</h2>
<p> <p>
Only the most relevant and well-known devices are listed here, a Only the most relevant and well-known devices are listed here, a
complete, sortable overview is available{" "} complete, sortable overview is available{" "}
<R href="https://www.electricunicycles.eu/product_catalog">here</R>. <R href="https://www.electricunicycles.eu/product_catalog">here</R>.
</p> </p>
<div class="raster">
<DeviceTile <DeviceTile
href="/en/KSS22" href="/en/KSS22"
name="Kingsong S22" name="Kingsong S22"
@ -1160,11 +1152,21 @@ function Overview() {
<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> </div>
</article> </article>
<footer /> <footer />

2
src/routes/soon.tsx
View file

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

23
src/styles/start.scss
View file

@ -21,20 +21,24 @@
background: #555; background: #555;
} }
[class*="col-"] { body.start {
float: left;
}
.row {
clear: both;
}
body {
background-color: #0f0e17; background-color: #0f0e17;
color: #a7a9be; color: #a7a9be;
text-align: left; text-align: left;
font-size: 1.4em; font-size: 1.4em;
max-width: 900px; max-width: 1200px;
margin: auto; margin: auto;
display: flex;
align-items: center;
flex-direction: column;
> img,
> video {
max-height: 60vh;
}
.row {
clear: both;
} }
p { p {
@ -109,3 +113,4 @@ a {
width: 100%; width: 100%;
} }
} }
}