marin.gerard/moniks_bot
1
0
Fork 0
forked from julien.oculi/fork_mon_premier_robot
Code Pull requests Activity

feat(client): 💄 revamp ui and add css

Browse source
This commit is contained in:
Julien Oculi 2024-06-25 14:55:30 +02:00
parent dce08d2b40
commit 479234ef1d
1 changed files with 207 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

151
client/index.html
View file

@ -6,18 +6,32 @@
<title>Contrôle du robot</title> <title>Contrôle du robot</title>
</head> </head>
<body> <body>
<main>
<h1>Contrôle du robot sans fils</h1> <h1>Contrôle du robot sans fils</h1>
<p> <p>
Cette page permet de contrôler le robot depuis un PC portable 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 connecté au WiFi du robot. Elle est destinée aux personnes
pas de smartphone. n'ayant pas de smartphone.
</p> </p>
<section class="infos">
<div>
<h2>Paramètres de contrôle</h2> <h2>Paramètres de contrôle</h2>
<p> <p>
Ici vous pourrez paramétrer les contrôles du robot, rentrer son Ici vous pourrez paramétrer les contrôles du robot,
adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle rentrer son adresse IP ainsi que lui indiquer la
de rotation désiré. distance à parcourir ou l'angle de rotation désiré.
</p> </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"> <form class="settings" id="settings">
<label> <label>
<span>Adresse IP du robot</span> <span>Adresse IP du robot</span>
@ -58,13 +72,18 @@
/> />
</label> </label>
</div> </div>
<div class="touch-controls" id="touch-controls"> </section>
<section class="touch-controls" id="touch-controls">
<span class="placeholder"></span> <span class="placeholder"></span>
<button title="Avancer" data-command="forward" data-value="2"> <button title="Avancer" data-command="forward" data-value="2">
⬆️ ⬆️
</button> </button>
<span class="placeholder"></span> <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>
<button title="Arrêter" data-command="stop" data-value="0"> <button title="Arrêter" data-command="stop" data-value="0">
@ -82,12 +101,8 @@
⬇️ ⬇️
</button> </button>
<span class="placeholder"></span> <span class="placeholder"></span>
</div> </section>
<h2>Contrôle</h2> </main>
<p>
Amusez vous ! Pour contrôler le robot, utilisez les flèches
directionnelles pour le diriger et la barre espace pour le stopper.
</p>
</body> </body>
<script type="module"> <script type="module">
// Input handlers // Input handlers
@ -279,9 +294,119 @@
} }
</script> </script>
<style> <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 { .touch-controls {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); 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> </style>
</html> </html>