FIXED CSS

This commit is contained in:
ishak jmilou.ishak
2024-11-04 14:06:27 +01:00
parent 7cc2fbd8ec
commit 1b747edb8d
2 changed files with 30 additions and 22 deletions

View File

@@ -73,47 +73,51 @@ body {
transition: transform 0.2s ease, background-color 0.2s ease; transition: transform 0.2s ease, background-color 0.2s ease;
} }
/* Middenknop */ /* Direction buttons */
.btn:nth-child(1) { .btn:nth-child(1) { /* Left */
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-125%, -50%); transform: translate(-160%, -50%);
} }
/* Knop boven */ .btn:nth-child(2) { /* Up */
.btn:nth-child(2) {
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, -35%);
} }
/* Knop rechts */ .btn:nth-child(3) { /* Right */
.btn:nth-child(3) {
top: 50%; top: 50%;
right: 0; right: 0;
transform: translateY(-50%); transform: translate(35%,-50%);
} }
/* Knop onder */ .btn:nth-child(4) { /* Down */
.btn:nth-child(4) {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translate(-50%, 35%);
} }
/* Knop links */ .btn:nth-child(5) { /* Stop Button */
.btn:nth-child(5) {
top: 50%; top: 50%;
left: 0; left: 50%;
transform: translateY(-50%); transform: translate(-50%, -50%);
background-color: red; /* Distinct color for the stop button */
width: 60px; /* Slightly larger for emphasis */
height: 60px; /* Slightly larger for emphasis */
line-height: 60px; /* Center text vertically */
} }
/* Hover effects */
.btn:hover { .btn:hover {
background-color: #0056b3; background-color: #0056b3;
/* transform: scale(1.1); */
} }
.btn:active { .btn:active {
background-color: #004494; background-color: #004494;
} }
.stop-button:hover {
background-color: darkred; /* Different hover color for the stop button */
}

View File

@@ -1,10 +1,15 @@
{%extends 'base.html'%} {%block head%} {%endblock%} {%block content%} {% extends 'base.html' %}
{% block head %}
<link rel="stylesheet" href="../static/style.css" />
{% endblock %}
{% block content %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kobuki</title> <title>Kobuki</title>
<link rel="stylesheet" href="../static/style.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -17,7 +22,7 @@
<button class="btn" name="direction" value="up"></button> <button class="btn" name="direction" value="up"></button>
<button class="btn" name="direction" value="right"></button> <button class="btn" name="direction" value="right"></button>
<button class="btn" name="direction" value="down"></button> <button class="btn" name="direction" value="down"></button>
<button class="btn" name="direction" value="stop">Stop</button> <button class="btn stop-button" name="direction" value="stop">Stop</button>
</form> </form>
</div> </div>
</div> </div>
@@ -27,5 +32,4 @@
<script src="../static/script.js"></script> <script src="../static/script.js"></script>
</body> </body>
</html> </html>
{% endblock %} {% endblock %}