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

Refactoring

Browse source
This commit is contained in:
aronmal 2023-10-23 17:39:38 +02:00
parent b23c2a24ea
commit 745af7a53e
Signed by: aronmal
GPG key ID: 816B7707426FC612
33 changed files with 321 additions and 553 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,134 +1,18 @@
import { A, Link, Title, useNavigate } from "solid-start";
import { Body, Link, Title } from "solid-start";
import DeviceTile from "~/components/DeviceTile";
import R from "~/components/Reference";
import Navbar, { lightMode } from "~/components/en/Navbar";
function Overview() {
const navigate = useNavigate();
return (
<>
<Body classList={{ "light-mode": lightMode() }}>
<Title>Introduction EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" />
<div id="navbar">
<A href="/en/">Start</A>
<A href="#start">What are EUCs?</A>
<A href="#why">Why EUCs?</A>
<A href="#funktion">Functionality</A>
<A href="#begriffe">Glossarry</A>
<A href="#sicherheit">Safety</A>
<A href="#ausrüstung">Gear</A>
<A href="#cutout">Cut-out's</A>
<A href="#akkuss">Battery safety</A>
<A href="#fahrweise">Ride style</A>
<A href="#wobbles">Wobbles</A>
<A href="#leistung">Performance</A>
<A href="#federung">Suspension</A>
<A href="#reifen">Tires</A>
<A href="#historie">History</A>
<A href="/en/manufacturers">Manufacturers</A>
<A href="#geräte">Device list</A>
{/* <button onclick="myFunction()">Light Mode</button> */}
{/* <button onclick="window.location.href='/de/overview';">Sprache</button> */}
<div>{/* <button onclick="closeit()"><A> <-Close</A></button> */}</div>
</div>
<div id="sidenavbar">
<button onClick={() => navigate(-1)}>Back</button>
<A href="#start">Start</A>
{/* <button onclick="menü()">Menu</button> */}
</div>
<Navbar />
<header id="start">
<img src="/images/cover.jpg" />
</header>
{/*
<!--light-mode-->
*/}{" "}
{/*
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("light-mode");
}
</script>
*/}{" "}
{/*
<!--menü-->
*/}{" "}
{/*
<script>
function menü() {
var element = document.body;
element.classList.toggle("menü");
document.getElementById("sidenavbar").style.visibility = "hidden";
document.getElementById("navbar").style.visibility = "visible";
}
</script>
*/}
{/* <script>
document.getElementById("imghover1").addEventListener("mouseover", function_imghover1);
document.getElementById("imghover1").addEventListener("mouseout", funtion_hide);
document.getElementById('imghover2').addEventListener("mouseover", function_imghover2);
document.getElementById('imghover2').addEventListener("mouseout", funtion_hide);
getElementById('imghover3').addEventListener("mouseover", function_imghover3);
getElementById('imghover3').addEventListener("mouseout", funtion_hide);
function function_imghover1(){
document.getElementById("hidden1").style.display = "block";
let position = document.getElementById("hidden1");
const onMouseMove = (e) =>{
position.style.left = e.pageX + 'px';
position.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
}
function function_imghover2(){
document.getElementById('hidden2').style.display = "block";
let position = document.getElementById('hidden2');
const onMouseMove = (e) =>{
position.style.left = e.pageX + 'px';
position.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
}
function function_imghover3(){
document.getElementById('hidden3').style.display = "block";
let position = document.getElementById('hidden3');
const onMouseMove = (e) =>{
position.style.left = e.pageX + 'px';
position.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
}
function funtion_hide(){
document.getElementById('hidden1').style.display = "none";
document.getElementById('hidden2').style.display = "none";
document.getElementById('hidden3').style.display = "none";
}
</script> */}
{/*
<!--closeit-->
*/}{" "}
{/*
<script>
function closeit() {
var element = document.body;
element.classList.toggle("menü");
document.getElementById("sidenavbar").style.visibility = "visible";
document.getElementById("navbar").style.visibility = "hidden";
}
</script>
*/}{" "}
{/*
<!--Intro-->
*/}
<article>
@ -447,13 +331,6 @@ function Overview() {
<div class="row">
<h3 id="begriffe">Glossary and specification explonation</h3>
<div class="col-6">
{/*
<style>
p {
text-align: left;
}
</style>
*/}
<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
@ -519,7 +396,7 @@ function Overview() {
</p>
</div>
<div style={{ "padding-left": "3%" }} class="col-6">
<div class="col-6">
<p class="imghover">
<b id="trolley">Trolley Handle</b>: an extendable handle for
pushing the device, similar to a suitcase.
@ -991,7 +868,7 @@ function Overview() {
control. Generally, many say it's a <b>matter of training</b> and
experience. Also, devices like Gotway's MSuper series, RS's and
EXN's are more vulnerable than, for example, the Veteran Sherman or
the <R href="/KS22ENG">KS S22</R>.
the <R href="/en/KS22">KS S22</R>.
</p>
</div>
@ -1095,11 +972,7 @@ function Overview() {
<div class="righties">
<img src="/images/solowheel-1.jpg" />
</div>
<img
class="lefties"
style={{ clear: "none" }}
src="/images/historieEUC.webp"
/>
<img class="lefties" src="/images/historieEUC.webp" />
<p>
The underlying technique came with the
<R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@ -1226,7 +1099,7 @@ function Overview() {
</p>
<DeviceTile
href="KSS22"
href="/en/KSS22"
name="Kingsong S22"
src="/videos/S20Werbevideo.mp4"
/>
@ -1263,7 +1136,7 @@ function Overview() {
</div>
</article>
<footer />
</>
</Body>
);
}