Skip to content

Site3 #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
frederiquepinson merged 5 commits into from
Apr 13, 2026
Merged

Site3 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0c348d8
dd
frederiquepinson Oct 25, 2025
91e6b9e
improved img ratios in presentation page
frederiquepinson Oct 27, 2025
9219e87
update readme
frederiquepinson Oct 27, 2025
b3b7b9c
update wheel chair presention page
frederiquepinson Apr 13, 2026
cae3536
Merge branch 'dev' into site3
frederiquepinson Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
Français | English
------------- | -------------
[![BaahBoxPix](./documentation/img/fr.jpg)](./documentation/fr/README.md) | [![BaahBoxPix](./documentation/img/en.jpg)](./documentation/en/README.md)| Content
# Présentation
Cliquez sur l'image ci-dessous pour accéder au site de présentation du projet Baah Box.


![BaahBoxPix](./documentation/img/photoBaaBox.jpg)
[![BaahBoxPix](https://github.com/Orange-OpenSource/BaahBox-Arduino/blob/dev/docs/assets/images/snapShopBBoxDoc.png)](https://orange-opensource.github.io/BaahBox-Arduino/)
216 changes: 216 additions & 0 deletions docs/BaahBox_fauteuil.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="BaahBox - Solution pour la rééducation musculaire et l'entraînement aux prothèses myo-électriques" />
<title>BaahBox - Rééducation et prothèses myo-électriques</title>
<link rel="stylesheet" href="css/theme.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/dispo.css" />
</head>
<body>
<header class="header">
<div class="container">
<nav class="navbar">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo.webp" width="50px" height="50px" style="border-radius: 50%;" alt=""/>
<span>BaahBox</span>
</a>
</div>
<ul class="nav-links">
<li><a href="#accueil" class="active">Accueil</a></li>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="#telechargements">Téléchargements</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>

<main>
<section id="accueil" class="hero">
<div class="container">
<div class="hero-image">
<img src="assets/images/fauteuilRoulantF.png"
alt="BaahBox - Dispositif de rééducation musculaire" />
</div>
</div>
<Br/> <Br/>
<div class="container">

<h2 style="text-align:center">Qu'est-ce que la BaahBox ?</h2>
<Br/>
<h4 style="text-align:center">La BaahBox est un équipement
d'aide à la rééducation
<Br/>ou à l'entraînement des muscles.</h4>
<p>
Elle se compose d'un boîtier électronique
qui se connecte à des applications mobiles (iOS ou Android) pour transformer
la rééducation ou la préparation musculaire en une expérience
ludique et motivante. <br/>
Grâce à ses accessoires (capteurs musculaires, joystick, poignée, etc.),

le boîtier transmet les mouvements du patient aux jeux pour faire bouger
les personnages. </p>

<p>
Il y a plusieurs versions de la BaahBox, chacune permettant
de faire une réducation ou une préparation différente.
</p>
</div>
</section>

<section class="about">
<h1 style="text-align:center">Que peut on faire avec la BaahBox ?</h1>
<p></p>
<div class="row">
<div class="column" style="background-color:rgba(170, 170, 170, 0);">
<div class="hero-image">
<img src="assets/images/photoBaahBox.jpg"
alt="BaahBox - Dispositif de rééducation musculaire" />
</div>
</div>
<div class="column" style="background-color:rgba(170, 170, 170, 0);">
<div class="hero-image">
<img src="assets/images/BBoxV4_Modules.png"
alt="BaahBox - Dispositif de rééducation du membre supérieur" />
</div>
</div>
<div class="column" style="background-color:rgba(170, 170, 170, 0);">
<div class="hero-image">
<img src="assets/images/BaahStick.png"
alt="BaahBox - Dispositif de préparation à la manipulation
d'un fauteuil roulant électrique" />
</div>
</div>
</div>

<p class="subtitle">La BaahBox est un équipement d’aide à
la rééducation ou à
l'entraînement des muscles.</p>

<p class="subtitle">
est un système qui propose des jeux simples sur smartphone
(iOS et Android) pour faire connectés via Bluetooth à un boitier dédié,
qui lui transmet des informations venant de capteurs musculaires
ou d’un joystick.

Faites sauter un mouton, évitez des astéroïdes, en utilisant un joystick
et vous pourrez ainsi faire travailler vos muscles et
articulations du bras en vous amusant!
</p>

</section>

<section>
<div class="hero-content">
<div class="cta-buttons">
<a href="#telechargements" class="btn btn-primary">Télécharger l'application</a>
<a href="documentation.html" class="btn btn-secondary">Documentation</a>
</div>
</div>
</section>

<section id="telechargements" class="downloads">
<div class="container">
<div class="section-header">
<h2>Télécharger l'application</h2>
<p class="section-subtitle">Disponible sur iOS et Android pour une rééducation
ludique et efficace</p>
</div>

<div class="download-cards">
<div class="download-card">
<div class="download-icon">
<i class="fab fa-android"></i>
</div>
<h3>Pour Android</h3>
<a href="https://play.google.com/store/apps/details?id=com.orange.labs.baahbox&pcampaignid=web_share" target="_blank" class="store-badge" aria-label="Télécharger sur le Google Play Store pour Android">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" style="width:150px; height:auto;" alt="Disponible sur Google Play"/>
</a>
</div>

<div class="download-card">
<div class="download-icon">
<i class="fab fa-apple"></i>
</div>
<h3>Pour iOS</h3>
<a href="https://apps.apple.com/fr/app/baahbox/id1474621985" target="_blank" class="store-badge" aria-label="Télécharger sur l'App Store pour iOS">
<img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-app-store.svg" style="width:150px; height:auto;" alt="Télécharger sur l'App Store"/>
</a>
</div>
</div>

<div class="qr-section">
<h3 class="qr-title">Ou scannez le QR code</h3>
<p class="qr-subtitle">Utilisez l'appareil photo de votre téléphone pour scanner le code correspondant à votre appareil</p>

<div class="qr-container">
<div class="qr-item">
<div class="qr-code">
<p class="qr-label">Android</p>
<img
src="assets/images/doc/qrcode-android.webp"
alt="QR code pour télécharger l'application Android"
class="qr-image"
>
</div>
</div>

<div class="qr-item">
<div class="qr-code">
<p class="qr-label">iOS</p>
<img
src="assets/images/doc/qrcode-apple.webp"
alt="QR code pour télécharger l'application iOS"
class="qr-image"
>
</div>
</div>
</div>
</div>
</div>
</section>
</main>

<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>BaahBox</h3>
<p>Équipement d’aide à la rééducation de muscles suite à un accident ou à un traumatisme</p>
<div class="social-links">
<a href="#" aria-label="GitHub"><img src="https://www.svgrepo.com/show/450156/github.svg" style="width:20px; height:auto;" alt=""/></a>
</div>
</div>
<div class="footer-section">
<h3>Liens rapides</h3>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="documentation.html">Documentation</a></li>
<li><a href="#telechargements">Téléchargements</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<div class="contact-email">
<img src="assets/images/icons/mailto.svg" alt="Email" class="email-icon">
<a href="mailto:frederique.pinson@orange.com">frederique.pinson@orange.com</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Orange SA. Distribué sous licence GPL v3.</p>
</div>
</div>
</footer>

<script src="js/main.js"></script>
</body>
</html>
Binary file added docs/assets/images/JoystickYohann.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/fauteuilRoulantF.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/images/snapShopBBoxDoc.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion docs/css/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
--color-text-primary: #C9D1D9;
--color-text-secondary: #8B949E;
--color-accent: #58A6FF;
--color-accent-alt: #2c7be5;
--color-border: #30363d;
--color-card-bg: #161B22;
--color-card-shadow: rgba(0, 0, 0, 0.2);
Expand Down Expand Up @@ -139,7 +140,7 @@ img {

.btn-primary {
background-color: var(--color-primary);
color: white;
display: white;
position: relative;
transition: all 0.3s ease;
background-color: #1a5bbf;
Expand Down
97 changes: 40 additions & 57 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<title>BaahBox - Rééducation et prothèses myo-électriques</title>
<link rel="stylesheet" href="css/theme.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/lightbox.css" />
<link rel="stylesheet" href="css/dispo.css" />
</head>
<body>
<header class="header">
Expand Down Expand Up @@ -39,7 +39,7 @@
<section id="accueil" class="hero">
<div class="container">
<div class="hero-image">
<img src="assets/images/Baahbox_Hero_1024.webp" alt="BaahBox - Dispositif de rééducation musculaire" />
<img src="assets/images/Baahbox_Hero_1024.png" alt="BaahBox - Dispositif de rééducation musculaire" />
</div>
</div>
<br />
Expand All @@ -63,75 +63,65 @@ <h4 style="text-align: center">
</section>

<section class="about">
<h1 style="text-align: center">Que peut-on faire avec la BaahBox ?</h1>
<h1 style="text-align: center">Que peut on faire avec la BaahBox ?</h1>
<br />
<p style="font-size: 1.5rem; text-align: center; color: var(--color-accent-alt)">
Il y a plusieurs versions de la BaahBox, chacune permettant de faire une rééducation ou une préparation
différente.
musculaire différente.
</p>

<br />
<br />
<br />
<br />

<div class="download-cards">
<div class="download-card">
<div class="download-icon">
<i class="fas fa-wheelchair"></i>
</div>
<div class="row">
<div class="column" style="background-color: #aaaaaa26">
<h6 style="text-align: center">Simulateur de fauteuil roulant</h6>
<p style="font-size: 1.25rem; text-align: center">
Apprendre à se déplacer en fauteuil roulant électrique, avec un simulateur et un jeu de labyrinthe.
<a href= "BaahBox_fauteuil.html">Apprendre à se déplacer en fauteuil roulant électrique, avec un simulateur et un jeu de labyrinthe.</a>
</p>
<div style="margin: 1rem auto 0; width: 100%; display: flex; justify-content: center; align-items: center;">
<div style="width: 100%; max-width: 300px; height: 262px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
<img
src="assets/images/BaahStick.webp"
alt="BaahBox - Simulateur de joystick de fauteuil roulant électrique"
loading="lazy"
style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;"
class="lightbox-img"/>
</div>
</div>
</div>

<div class="download-card">
<div class="download-icon">
<i class="fas fa-hand-paper"></i>
<br/>

<div class="hero-image">
<img
src="assets/images/BaahStick.png"
alt="BaahBox - Simulateur de joystick de fauteuil roulant electrique " />
</div>

</div>
<div class="column" style="background-color: #aaaaaa26">
<h6 style="text-align: center">Entraînement au pilotage de prothèse </h6>
<p style="font-size: 1.25rem; text-align: center">
Rééducation ou entraînement des muscles pour apprendre à piloter une prothèse électrique.
Rééducation ou entraînement des muscles à l'aide de capteurs musculaires,
par exemple pour apprendre à piloter une prothèse électrique. <br/>
</p>
<div style="margin: 1rem auto 0; width: 100%; display: flex; justify-content: center; align-items: center;">
<div style="width: 100%; max-width: 300px; height: 225px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
<img
src="assets/images/doc/captors/photoBaahBox_p.webp"
alt="BaahBox - entraînement des muscles pour apprendre à piloter une prothèse électrique"
loading="lazy"
style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;"
class="lightbox-img"/>
</div>
<div class="hero-image">
<img
src="assets/images/photoBaahBox.jpg"

alt="BaahBox - entraînement des muscles pour apprendre à piloter une prothèse électrique" />
</div>
</div>

<div class="download-card">
<div class="download-icon">
<i class="fas fa-hand-paper"></i>
</div>
<p style="font-size: 1.2Ò5rem; text-align: center">
<div class="column" style="background-color: #aaaaaa26">
<h6 style="text-align: center">Rééducation du membre supérieur par le jeu</h6>
<p style="font-size: 1.25rem; text-align: center">
Rééducation de parties d'un membre supérieur (doigts, poignet, etc.) avec un joystick à forme modulable,
une poignée, un télécommande Wii nunchuck...
une poignée, un télécommande Wii.
</p>
<div style="margin: 1rem auto 0; width: 100%; display: flex; justify-content: center; align-items: center;">
<div style="width: 100%; max-width: 300px; height: 225px; display: flex; justify-content: center; align-items: center; border-radius: 8px;">
<img
src="assets/images/BBoxV4_Modules.webp"
alt="BaahBox - Dispositif de rééducation du membre supérieur"
loading="lazy"
style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;"
class="lightbox-img"/>
</div>
<div class="hero-image">
<img
src="assets/images/BBoxV4_Modules.png"
alt="BaahBox - Dispositif de rééducation du membre supérieur" />
</div>
<br/>
<div class="hero-image">
<img
src="assets/images/JoystickYohann.png"
alt="BaahBox - Dispositif de rééducation du membre supérieur" />
</div>

</div>
</div>
<br />
Expand All @@ -140,7 +130,6 @@ <h1 style="text-align: center">Que peut-on faire avec la BaahBox ?</h1>
<br />
</section>


<section id="telechargements" class="downloads">
<div class="container">
<div class="section-header">
Expand Down Expand Up @@ -251,11 +240,5 @@ <h3>Contact</h3>
</footer>

<script src="js/main.js"></script>
<div id="lightbox" class="lightbox">
<span class="lightbox-close">&times;</span>
<img id="lightbox-img" class="lightbox-content" alt="">
</div>

<script src="js/lightbox.js"></script>
</body>
</html>
Loading