kamp/FTMS-Rower
1
0
Fork 0
Code Issues Pull Requests Activity

added navbar

Browse Source 
Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-11-01 12:59:59 +01:00
parent cbaa1f662b
commit a6d0f15031
3 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/main.css
View File

@ -41,9 +41,51 @@ button {
color: #fff;
}
button:hover {
background-color: #0066cc;
}
button:hover {
background-color: #0066cc;
}
.navbar {
background-color: #b3cbff;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 110px;
}
.logo {
margin-right: 20px;
}
.logo img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.nav-links ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
text-transform: uppercase;
font-weight: bold;
}
.nav-links a:hover {
color: #737373;
}
footer {
position: fixed;

8
docs/PoC.md
View File

@ -63,6 +63,8 @@ But that does not prevent play/pause when I click on the video, its seems adding
}
```
Now I have been working on improving the UI a little bit, to make it a little better for testing (while doing some trainings). However, the next big step definitely has to be the adjusted video speed, since this is crucial.
Stay tuned for further updates...
## known ToDos
@ -72,9 +74,9 @@ Stay tuned for further updates...
* think of the basic concept and try out a way to calculate video playback speed based on live training data and then adjust video playback accordingly
* testing phase, including error handlings etc. - hopefully with more people than myself :)
* better ui - thinking of a fullscreen video with overlays of live training data
~~* add favicon~~
* add a top navigation bar with settings menu (maybe to select other videos and later on also to log in etc) and a logo
* then remove h1 title
* ~~add favicon~~
* ~~add a top navigation bar with settings menu (maybe to select other videos and later on also to log in etc) and a logo~~
* ~~then remove h1 title~~
* hide connect button, once connected and just show the connected device in top navbar
* remove volume from video.js and add a mute-button in top navbar
* add a progress bar to the video, which shows the percentage of the training video done

13
index.html
View File

@ -13,8 +13,17 @@
</head>
<body>
<h1>FTMS Video Rower | Demo</h1>
<nav class="navbar">
<div class="logo">
<img src="img/logo.png" alt="FTMS Video Rower Logo" width="150">
</div>
<div class="nav-links">
<ul>
<li><a href="index.html">Training</a></li>
<li><a href="#change-video">Change Video</a></li>
</ul>
</div>
</nav>
<p><button id="bleConnectionButton">Connect FTMS BLE Rower</button></p>