Skip to content

Commit

Permalink
Styles applied in the right bar, added buttons,
Browse files Browse the repository at this point in the history 
logos, etc.
  • Loading branch information
@frasanz
frasanz committed Sep 25, 2024
1 parent fa4cfe2 commit c26c4d7
Show file tree
Hide file tree
Showing 6 changed files with 247 additions and 69 deletions.
159 changes: 145 additions & 14 deletions frontend/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
body, html {
overflow: hidden; /* Disable scrolling */
height: 100%;
font-family: 'Open Sans'; /* Use Open Sans as the default font */

}
/* Ensure the parent container has 100% width and specific height */
Expand All @@ -21,14 +22,56 @@ body, html {
#canvas {
background-color: #3a3a3b;
}
#title, #buttons {
#buttons {
margin-top: 10px;
text-align: center;
color: #562952;
background-color: #562952;
flex: 0 0 10%;
}
#title {
margin-top: 10px;
text-align: center;
background-color: #562952;
border-bottom-left-radius: 50px;
flex: 0 0 10%;
padding: 0;
margin: 0;
position: relative;

}
#usage-info {
position: absolute;
bottom: 0;
right: 0;
color: white;
padding: 10px; /* Adjust as needed */
}
#photo-info-content{
margin: 1em;
padding: 0.5em;
border: 1px solid #562952;
border-radius: 5px;
color: #562952;
margin-bottom: 1.5em !important;
}
.logo {
display: block;
width: 60%; /* 60% of the parent div's width */
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
}
#photo-info-text{
text-align: center;
}
.col-md-2 {
height: 100%; /* Ensure parent container has a defined height */
}

#coordinates {
flex: 1 1 80% !important;
flex: 1 1 auto !important;
max-height: 80%;
overflow-y: auto;
}
.tools {
Expand All @@ -38,9 +81,10 @@ body, html {
display: flex;
flex-direction: column;
}
.column-right {
.column-photo {
height: 100% !important;
}

ul {
list-style-type: none; /* Remove default bullet points */
padding: 0 !important; /* Remove default padding */
Expand All @@ -49,25 +93,24 @@ ul {
li{
display: inline-block; /* Make it behave like an inline element */
padding: 10px 10px; /* Add padding to simulate button shape */
background-color: #56295277; /* Button color (Bootstrap's primary color) */
width: 95%; /* Full width */
color: white; /* Text color */
width: calc(100% - 2em); /* Subtracting the margins from the width */
margin-left: 1em;
margin-right: 1em;
margin-bottom: 0.5em;
background-color: #aa90a9; /* Button color (Bootstrap's primary color) */
color: #e9f990;; /* Text color */
border: none; /* Remove border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor to indicate it's clickable */
font-size: 12px;
font-size: 16px;
text-align: left;
margin: 5px; /* Add margin between buttons */
transition: background-color 0.3s ease; /* Smooth transition for hover */
}

li:hover {
li.completed {
background-color: #563952; /* Darker color on hover */
}

li:active {
background-color: #004085; /* Even darker color when clicked */
}
.opacity-slider-container {
background-color: white;
padding: 10px;
Expand All @@ -77,4 +120,92 @@ li:active {
.fa-icon-marker {
color: #f08ce7; /* Customize the color of the icon */
font-size: 16px; /* Adjust the font size to fit the icon */
}
}
.white {
color: white !important;
}
#button-container{
margin-left: auto;
margin-right: auto;
text-align: center;
}

#Try{
border-radius: 1em;
font-size: 14px;
color: #fff;
background-color: #562952;
border: 1px solid #562952;
font-weight: medium;
}
#Try:hover{
background-color: #fef7ff;
border: 1px solid #562952;
color: #562952;
/* Change the pointer to a hand */
cursor: pointer !important;
}

#Submit.disabled{
border-radius: 1em;
font-size: 14px;
background-color: #fef7ff;
border: 1px solid #aa90a9;
color: #aa90a9;
font-weight: medium;
}
#Submit{
border-radius: 1em;
font-size: 14px;
background-color: #fef7ff;
border: 1px solid #11ac7a;
color: #11ac7a;
font-weight: medium;
}
#Submit:hover{
background-color: #11ac7a;
border: 1px solid #11ac7a;
color: #fff;
/* Change the pointer to a hand */
cursor: pointer !important;
}

#Skip{
border-radius: 1em;
font-size: 14px;
background-color: #fef7ff;
border: 1px solid #f13140;
color: #f13140;
font-weight: medium;
}

#Skip:hover{
background-color: #f13140;
border: 1px solid #f13140;
color: #fff;
/* Change the pointer to a hand */
cursor: pointer !important;
}

#small-logos-container {
margin-top: 1em;
display: flex;
align-items: center;
text-align: center;
}

.small-logos {
max-width: 40%; /* Adjust as needed */
margin: 0 auto; /* Center the logos */
}
.developed {
color: #333;
font-size: 10px;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
}
.developed:hover{
color: #000;
}

17 changes: 17 additions & 0 deletions frontend/static/img/LogoLostAtNight.svg
View file
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 frontend/static/img/fundedbyEU.png
View file
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 frontend/static/img/plan-b-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 16 additions & 5 deletions frontend/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ $(document).ready(function () {
stopContextMenu: true, // Disable the default context menu
selection: false // Disable object selection
});
$('#photo-info-text').text(response.image_name);

// Add buttons behavior
$('#Try').on('click', function () {
Expand Down Expand Up @@ -211,8 +212,8 @@ $(document).ready(function () {
const static_url = "/static/images/"; // Static URL
const imageUrl = static_url + image_name + '.JPG'; // Image URL
console.log(response);
const canvasWidth = $('#column-right').width(); // Canvas width
const canvasHeight = $('#column-right').height(); // Canvas height
const canvasWidth = $('#column-photo').width(); // Canvas width
const canvasHeight = $('#column-photo').height(); // Canvas height
canvas.setWidth(canvasWidth); // Set the canvas width
canvas.setHeight(canvasHeight); // Set the canvas height

Expand Down Expand Up @@ -415,24 +416,29 @@ $(document).ready(function () {
iconList.forEach(function (icon) {
const listItem = document.createElement('li');
listItem.id = "li-" + icon.id; // Set the ID attribute
console.log(icon.complete);

// Create Font Awesome icon element
const iconElement = document.createElement('i');
iconElement.className = 'fa-solid fa-location-dot ps-2 pe-2'; // Add the classes for the Font Awesome icon


// Check if it is complete and add class to li
if (icon.complete) {
listItem.classList.add('completed');
}
// Set the text content with the ID, X, and Y values
const span = document.createElement('span');
span.textContent = `${icon.id}`;
const spanRight = document.createElement('span');
spanRight.className = 'float-end d-block';
const info = document.createElement('span');
info.className = 'fa-solid fa-info-circle pe-3';
info.className = 'fa-solid fa-info-circle pe-3 white';
info.setAttribute('data-bs-toggle', 'tooltip');
info.setAttribute('data-bs-placement', 'right');
info.setAttribute('title', `px: ${icon.text.px.toFixed(2)} <br /> py: ${icon.text.py.toFixed(2)} <br> lat: ${icon.text.lat} <br> lon: ${icon.text.lon}`); // Set the tooltip text

const garbage = document.createElement('i');
garbage.className = 'fa-solid fa-trash-alt pe-2 '
garbage.className = 'fa-solid fa-trash-alt pe-2 white'

// If garbage icon is clicked, remove the icon
garbage.addEventListener('click', function () {
Expand All @@ -448,6 +454,10 @@ $(document).ready(function () {

// Append the list item to the container
listContainer.appendChild(listItem);

// Scroll the coordinates div to the bottom


});
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
Expand All @@ -457,6 +467,7 @@ $(document).ready(function () {

});
});
$('#coordinates').scrollTop($('#coordinates')[0].scrollHeight);
}


Expand Down
Loading

0 comments on commit c26c4d7

Please sign in to comment.