mirrors/yolov5
1
0
Fork 0
mirror of https://github.com/ultralytics/yolov5.git synced 2025-06-03 14:49:29 +08:00
Code Issues Projects Releases Wiki Activity

Auto-format by https://ultralytics.com/actions

Browse Source
This commit is contained in:
UltralyticsAssistant 2024-08-11 08:32:56 +00:00
parent d2709a0bae
commit 4b01e99218
1 changed files with 119 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
static/style.css
View File

@ -1,144 +1,151 @@
body { body {
margin: 1; margin: 1;
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: center; align-items: center;
height: 60vh; height: 60vh;
background-color: #ffffff; background-color: #ffffff;
} }
img { img {
width: 30%; width: 30%;
height: auto; height: auto;
} }
.app-header { .app-header {
background-color: rgb(255, 255, 255); /* Change the background color as needed */ background-color: rgb(
color: rgb(0, 0, 0); /* Change the text color as needed */ 255,
text-align: center; 255,
padding: 20px; 255
position: absolute; ); /* Change the background color as needed */
top: 20px; /* Adjust the distance from the top */ color: rgb(0, 0, 0); /* Change the text color as needed */
left: 50%; /* Center horizontally */ text-align: center;
transform: translateX(-50%); /* Center horizontally */ padding: 20px;
} position: absolute;
top: 20px; /* Adjust the distance from the top */
.app-header h1 { left: 50%; /* Center horizontally */
margin: 0; transform: translateX(-50%); /* Center horizontally */
font-size: 2em; /* Adjust the font size as needed */ }
}
.button-container { .app-header h1 {
text-align: center; margin: 0;
margin-bottom: 20px; font-size: 2em; /* Adjust the font size as needed */
position: absolute; }
top: 150px; /* Adjust the distance from the top */
left: 50%; /* Center horizontally */ .button-container {
transform: translateX(-50%); /* Center horizontally */ text-align: center;
margin-bottom: 20px;
position: absolute;
top: 150px; /* Adjust the distance from the top */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */
} }
#startButton { #startButton {
background-color: #4CAF50; /* Green color */ background-color: #4caf50; /* Green color */
color: white; color: white;
padding: 10px 20px; /* Adjust padding as needed */ padding: 10px 20px; /* Adjust padding as needed */
border: none; border: none;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
} }
#stopButton { #stopButton {
background-color: #FF0000; /* Red color */ background-color: #ff0000; /* Red color */
color: white; color: white;
padding: 10px 20px; /* Adjust padding as needed */ padding: 10px 20px; /* Adjust padding as needed */
border: none; border: none;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
} }
#videoDropdown{ #videoDropdown {
width: 10%; width: 10%;
padding: 10px; padding: 10px;
font-size: 16px; font-size: 16px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 225px; /* Adjust the distance from the top */ top: 225px; /* Adjust the distance from the top */
left: 50%; /* Center horizontally */ left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */ transform: translateX(-50%); /* Center horizontally */
} }
.button-active { .button-active {
background-color: #4CAF50; /* Green */ background-color: #4caf50; /* Green */
color: white; color: white;
/* Add more styles as needed, such as positioning */ /* Add more styles as needed, such as positioning */
} }
.button-inactive { .button-inactive {
background-color: #ccc; /* Gray */ background-color: #ccc; /* Gray */
color: #666; color: #666;
/* Add more styles as needed */ /* Add more styles as needed */
} }
.playButton{ .playButton {
background-color: #29ca8c; /* Green color */ background-color: #29ca8c; /* Green color */
color: white; color: white;
width: 100px; width: 100px;
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
display: grid; display: grid;
place-content: center; place-content: center;
position: absolute; position: absolute;
top: 285px; /* Adjust the distance from the top */ top: 285px; /* Adjust the distance from the top */
left: 46%; /* Center horizontally */ left: 46%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */ transform: translateX(-50%); /* Center horizontally */
} }
.detectionButton{ .detectionButton {
background-color: #0004ff; /* Green color */ background-color: #0004ff; /* Green color */
color: white; color: white;
width: 100px; width: 100px;
height: 50px; height: 50px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
display: grid; display: grid;
place-content: center; place-content: center;
position: absolute; position: absolute;
top: 285px; /* Adjust the distance from the top */ top: 285px; /* Adjust the distance from the top */
left: 54%; /* Center horizontally */ left: 54%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */ transform: translateX(-50%); /* Center horizontally */
} }
.loader { .loader {
pointer-events: none; pointer-events: none;
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; /* Light grey */ border: 3px solid transparent; /* Light grey */
border-top-color: #ffffff; /* Blue */ border-top-color: #ffffff; /* Blue */
animation: an1 1s ease infinite; animation: an1 1s ease infinite;
} }
@keyframes an1 { @keyframes an1 {
0% { transform: rotate(0turn); } 0% {
100% { transform: rotate(1turn); } transform: rotate(0turn);
}
100% {
transform: rotate(1turn);
}
} }
#vi { #vi {
position: relative; position: relative;
top: 150px; /* Adjust the distance from the top */ top: 150px; /* Adjust the distance from the top */
left: -10%; /* Center horizontally */ left: -10%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */ transform: translateX(-50%); /* Center horizontally */
width: 40%; width: 40%;
height: auto; height: auto;
} }