feat(client): 💄 revamp ui and add css

This commit is contained in:
Julien Oculi 2024-06-25 14:55:30 +02:00
parent dce08d2b40
commit 479234ef1d

View file

@ -6,18 +6,32 @@
<title>Contrôle du robot</title>
</head>
<body>
<main>
<h1>Contrôle du robot sans fils</h1>
<p>
Cette page permet de contrôler le robot depuis un PC portable
connecté au WiFi du robot. Elle est destinée aux personnes n'ayant
pas de smartphone.
connecté au WiFi du robot. Elle est destinée aux personnes
n'ayant pas de smartphone.
</p>
<section class="infos">
<div>
<h2>Paramètres de contrôle</h2>
<p>
Ici vous pourrez paramétrer les contrôles du robot, rentrer son
adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle
de rotation désiré.
Ici vous pourrez paramétrer les contrôles du robot,
rentrer son adresse IP ainsi que lui indiquer la
distance à parcourir ou l'angle de rotation désiré.
</p>
</div>
<div>
<h2>Contrôle</h2>
<p>
Amusez vous ! Pour contrôler le robot, utilisez les
flèches directionnelles pour le diriger et la barre
espace pour le stopper.
</p>
</div>
</section>
<section class="inputs">
<form class="settings" id="settings">
<label>
<span>Adresse IP du robot</span>
@ -58,13 +72,18 @@
/>
</label>
</div>
<div class="touch-controls" id="touch-controls">
</section>
<section class="touch-controls" id="touch-controls">
<span class="placeholder"></span>
<button title="Avancer" data-command="forward" data-value="2">
⬆️
</button>
<span class="placeholder"></span>
<button title="Tourner à gauche" data-command="left" data-value="5">
<button
title="Tourner à gauche"
data-command="left"
data-value="5"
>
⬅️
</button>
<button title="Arrêter" data-command="stop" data-value="0">
@ -82,12 +101,8 @@
⬇️
</button>
<span class="placeholder"></span>
</div>
<h2>Contrôle</h2>
<p>
Amusez vous ! Pour contrôler le robot, utilisez les flèches
directionnelles pour le diriger et la barre espace pour le stopper.
</p>
</section>
</main>
</body>
<script type="module">
// Input handlers
@ -279,9 +294,119 @@
}
</script>
<style>
:root {
--translucent-high: rgba(255, 255, 255, 0.8);
--translucent-low: rgba(255, 255, 255, 0.4);
--padding: 0.5rem;
--padding-half: calc(var(--padding) / 2);
--border-size: 0.2rem;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background-color: rgb(247, 234, 219);
height: 100dvh;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
h1,
h2 {
margin: 0;
}
h1 {
text-align: center;
}
main {
padding: var(--padding);
height: 100%;
text-wrap: pretty;
}
.touch-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--padding);
padding: var(--padding);
button {
height: 5.5rem;
font-size: 3rem;
border-radius: var(--padding);
}
}
button {
border: solid var(--border-size) var(--translucent-high);
background: var(--translucent-high);
border-radius: var(--padding-half);
transition: all 0.2s ease;
height: 100%;
font-size: 110%;
&:active {
border-color: var(--translucent-low);
background-color: var(--translucent-low);
}
}
.input-controls,
.settings {
padding: var(--padding);
display: flex;
gap: var(--padding);
border: solid var(--border-size) var(--translucent-high);
border-radius: var(--padding-half);
align-items: center;
justify-content: space-around;
}
.inputs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
gap: var(--padding);
width: 100%;
}
.infos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
flex-wrap: wrap;
gap: var(--padding);
justify-content: space-between;
}
label {
display: grid;
gap: var(--padding);
}
input {
border: solid var(--border-size) var(--translucent-high);
background: var(--translucent-low);
border-radius: var(--padding-half);
transition: all 0.2s ease;
height: 100%;
padding: var(--padding-half);
font-family: 'Courier New', Courier, monospace;
outline: none;
&:focus {
background-color: var(--translucent-high);
}
}
</style>
</html>