atla8167/EXTREMUM_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed layouts, improved css, added scss files

Browse Source
This commit is contained in:
atla8167 2024-12-08 14:55:50 +02:00
parent b7547de7b8
commit 16e2351f9f
26 changed files with 16964 additions and 4033 deletions

1070
base/static/css/changes.css Normal file

File diff suppressed because it is too large Load Diff

5141
base/static/css/sb-admin-2.css Executable file → Normal file

File diff suppressed because it is too large Load Diff

13018
base/static/css/updates_sb-admin-2.css Executable file

File diff suppressed because it is too large Load Diff

BIN
base/static/img/heart.jpg Normal file

Binary file not shown.
Side by Side

After

(image error) Size: 234 KiB

116
base/static/scss/_buttons.scss

@ -25,7 +25,7 @@
align-items: stretch; align-items: stretch;
justify-content: center; justify-content: center;
.icon { .icon {
background: fade-out($black, .85); background: fade-out($black, 0.85);
display: inline-block; display: inline-block;
padding: $btn-padding-y $btn-padding-x; padding: $btn-padding-y $btn-padding-x;
} }
@ -50,3 +50,117 @@
} }
} }
} }
button.btn-primary {
font-size: 16px;
padding: 10px 20px;
background-color: #007bff;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease;
&:hover {
background-color: #0056b3;
}
}
.btn-dataset {
border: 1px solid #ddd;
background-color: #f9f9f9;
color: #555;
transition: all 0.3s ease;
border-radius: 30px;
&:hover {
background-color: #e2e6ea;
color: #333;
border-color: #ccc;
transform: scale(1.05);
}
&.active {
background-color: #007bff;
color: white;
border-color: #007bff;
i {
color: white;
}
}
}
.btn-outline-primary {
border: 2px solid #007bff;
color: #007bff;
background: none;
transition: all 0.3s ease-in-out;
&:hover {
background: #007bff;
color: #fff;
transform: scale(1.05);
}
}
.button-6 {
align-items: center;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
font-weight: 600;
transition: all 250ms;
&:hover {
transform: translateY(-1px);
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
&:active {
background-color: #f0f0f1;
transform: translateY(0);
}
}
.btn-primary {
background-color: #007bff;
border: none;
&:hover {
background-color: #0056b3;
}
}
.btn-view-models {
background-color: #ffffff;
color: #007bff;
border: 2px solid #007bff;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-view-models:hover {
background-color: #007bff;
color: #ffffff;
border-color: #0056b3; /* Slightly darker blue for hover effect */
transform: translateY(-2px); /* Subtle lift effect */
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); /* Light shadow for depth */
}
.btn-view-models i {
font-size: 18px; /* Adjust icon size */
transition: all 0.3s ease;
}
.btn-view-models:hover i {
transform: translateX(
5px
); /* Slide the icon slightly to the right on hover */
}

30
base/static/scss/_cards.scss

@ -22,15 +22,39 @@
padding-right: 1.725rem; padding-right: 1.725rem;
line-height: 51px; line-height: 51px;
font-weight: 900; font-weight: 900;
content: '\f107'; content: "\f107";
font-family: 'Font Awesome 5 Free'; font-family: "Font Awesome 5 Free";
color: $gray-400; color: $gray-400;
} }
&.collapsed { &.collapsed {
border-radius: $card-border-radius; border-radius: $card-border-radius;
&::after { &::after {
content: '\f105'; content: "\f105";
} }
} }
} }
} }
/* Minimal animations and transitions */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease-in-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Fade-in Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

18
base/static/scss/_dropdowns.scss

@ -19,3 +19,21 @@
display: none; display: none;
} }
} }
#dropdown-div {
overflow: hidden;
transition: max-height 2s ease-out;
}
.arrow {
transition: transform 0.5s ease;
cursor: pointer;
}
.rotate-down {
transform: rotate(180deg);
}
.rotate-up {
transform: rotate(0deg);
}

19
base/static/scss/_error.scss

@ -13,7 +13,7 @@
$steps: 20; $steps: 20;
@for $i from 0 through $steps { @for $i from 0 through $steps {
#{percentage($i*(1/$steps))} { #{percentage($i*(1/$steps))} {
clip: rect(random(100)+px,9999px,random(100)+px,0); clip: rect(random(100) + px, 9999px, random(100) + px, 0);
} }
} }
} }
@ -26,7 +26,7 @@
color: $gray-800; color: $gray-800;
background: $gray-100; background: $gray-100;
overflow: hidden; overflow: hidden;
clip: rect(0,900px,0,0); clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse; animation: noise-anim 2s infinite linear alternate-reverse;
} }
@ -34,7 +34,7 @@
$steps: 20; $steps: 20;
@for $i from 0 through $steps { @for $i from 0 through $steps {
#{percentage($i*(1/$steps))} { #{percentage($i*(1/$steps))} {
clip: rect(random(100)+px,9999px,random(100)+px,0); clip: rect(random(100) + px, 9999px, random(100) + px, 0);
} }
} }
} }
@ -47,6 +47,17 @@
color: $gray-800; color: $gray-800;
background: $gray-100; background: $gray-100;
overflow: hidden; overflow: hidden;
clip: rect(0,900px,0,0); clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse; animation: noise-anim-2 3s infinite linear alternate-reverse;
} }
.container-fluid {
padding-bottom: 500px;
}
.card-header {
background-color: #f8f9fa !important;
color: #333;
font-size: 1.1rem;
border-bottom: 1px solid #e0e0e0;
}

11
base/static/scss/_global.scss

@ -45,7 +45,7 @@ a {
height: 2.75rem; height: 2.75rem;
text-align: center; text-align: center;
color: $white; color: $white;
background: fade-out($gray-800, .5); background: fade-out($gray-800, 0.5);
line-height: 46px; line-height: 46px;
&:focus, &:focus,
&:hover { &:hover {
@ -58,3 +58,12 @@ a {
font-weight: 800; font-weight: 800;
} }
} }
html,
body {
scroll-behavior: smooth;
overflow-anchor: none;
}
body {
overflow-y: scroll;
}

13
base/static/scss/_login.scss

@ -20,7 +20,6 @@
} }
form.user { form.user {
.custom-checkbox.small { .custom-checkbox.small {
label { label {
line-height: 1.5rem; line-height: 1.5rem;
@ -38,7 +37,6 @@ form.user {
border-radius: 10rem; border-radius: 10rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
} }
.btn-google { .btn-google {
@ -48,3 +46,14 @@ form.user {
.btn-facebook { .btn-facebook {
@include button-variant($brand-facebook, $white); @include button-variant($brand-facebook, $white);
} }
.container-fluid {
padding-bottom: 500px;
}
.card-header {
background-color: #f8f9fa !important;
color: #333;
font-size: 1.1rem;
border-bottom: 1px solid #e0e0e0;
}

4
base/static/scss/_utilities.scss

@ -5,3 +5,7 @@
@import "utilities/border.scss"; @import "utilities/border.scss";
@import "utilities/progress.scss"; @import "utilities/progress.scss";
@import "utilities/rotate.scss"; @import "utilities/rotate.scss";
@import "utilities/forms.scss";
@import "utilities/tables.scss";
@import "utilities/text.scss";
@import "utilities/_responsiveness.scss";

16
base/static/scss/_variables.scss

@ -37,15 +37,17 @@ $yiq-contrasted-threshold: 195 !default;
// Typography // Typography
$body-color: $gray-600 !default; $body-color: $gray-600 !default;
$font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 'Noto Color Emoji' !default; $font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-weight-light: 300 !default; $font-weight-light: 300 !default;
// $font-weight-base: 400; // $font-weight-base: 400;
$headings-font-weight: 400 !default; $headings-font-weight: 400 !default;
// Shadows // Shadows
$box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, .2) !default; $box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, 0.2) !default;
$box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, .15) !default; $box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, 0.15) !default;
// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; // $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
// Borders Radius // Borders Radius
@ -69,13 +71,13 @@ $spacer: 1rem !default;
$grid-gutter-width: $spacer * 1.5 !default; $grid-gutter-width: $spacer * 1.5 !default;
// Transitions // Transitions
$transition-collapse: height .15s ease !default; $transition-collapse: height 0.15s ease !default;
// Dropdowns // Dropdowns
$dropdown-font-size: 0.85rem !default; $dropdown-font-size: 0.85rem !default;
$dropdown-border-color: $border-color !default; $dropdown-border-color: $border-color !default;
// Images // Images
$login-image: 'https://source.unsplash.com/K4mSJ7kc0As/600x800' !default; $login-image: "https://source.unsplash.com/K4mSJ7kc0As/600x800" !default;
$register-image: 'https://source.unsplash.com/Mv9hjnEUHR4/600x800' !default; $register-image: "https://source.unsplash.com/Mv9hjnEUHR4/600x800" !default;
$password-image: 'https://source.unsplash.com/oWTW-jNGl9I/600x800' !default; $password-image: "https://source.unsplash.com/oWTW-jNGl9I/600x800" !default;

22
base/static/scss/navs/_global.scss

@ -13,13 +13,13 @@
vertical-align: 0; vertical-align: 0;
border: 0; border: 0;
font-weight: 900; font-weight: 900;
content: '\f105'; content: "\f105";
font-family: 'Font Awesome 5 Free'; font-family: "Font Awesome 5 Free";
} }
} }
&.show { &.show {
.dropdown-toggle::after { .dropdown-toggle::after {
content: '\f107'; content: "\f107";
} }
} }
} }
@ -30,8 +30,8 @@
position: absolute; position: absolute;
transform: scale(0.7); transform: scale(0.7);
transform-origin: top right; transform-origin: top right;
right: .25rem; right: 0.25rem;
margin-top: -.25rem; margin-top: -0.25rem;
} }
.img-profile { .img-profile {
height: 2rem; height: 2rem;
@ -40,3 +40,15 @@
} }
} }
} }
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
padding-bottom: 1000px;
}

45
base/static/scss/navs/_sidebar.scss

@ -50,7 +50,7 @@
.collapse, .collapse,
.collapsing { .collapsing {
.collapse-inner { .collapse-inner {
padding: .5rem 0; padding: 0.5rem 0;
min-width: 10rem; min-width: 10rem;
font-size: $dropdown-font-size; font-size: $dropdown-font-size;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
@ -58,7 +58,7 @@
.collapse-header { .collapse-header {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
padding: .5rem 1.5rem; padding: 0.5rem 1.5rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 800; font-weight: 800;
font-size: 0.65rem; font-size: 0.65rem;
@ -100,8 +100,8 @@
&::after { &::after {
font-weight: 900; font-weight: 900;
content: '\f104'; content: "\f104";
font-family: 'Font Awesome 5 Free'; font-family: "Font Awesome 5 Free";
margin-right: 0.1rem; margin-right: 0.1rem;
} }
@ -119,8 +119,8 @@
overflow: hidden; overflow: hidden;
#sidebarToggle::after { #sidebarToggle::after {
content: '\f105'; content: "\f105";
font-family: 'Font Awesome 5 Free'; font-family: "Font Awesome 5 Free";
margin-left: 0.25rem; margin-left: 0.25rem;
} }
@ -192,7 +192,6 @@
width: $sidebar-base-width !important; width: $sidebar-base-width !important;
.nav-item { .nav-item {
// Accordion // Accordion
.collapse { .collapse {
position: relative; position: relative;
@ -243,12 +242,12 @@
vertical-align: 0; vertical-align: 0;
border: 0; border: 0;
font-weight: 900; font-weight: 900;
content: '\f107'; content: "\f107";
font-family: 'Font Awesome 5 Free'; font-family: "Font Awesome 5 Free";
} }
&.collapsed::after { &.collapsed::after {
content: '\f105'; content: "\f105";
} }
} }
} }
@ -273,7 +272,6 @@
width: $sidebar-collapsed-width !important; width: $sidebar-collapsed-width !important;
.nav-item { .nav-item {
// Accordion // Accordion
.collapse { .collapse {
position: absolute; position: absolute;
@ -283,7 +281,8 @@
// Grow In Animation for Toggled State // Grow In Animation for Toggled State
animation-name: growIn; animation-name: growIn;
animation-duration: 200ms; animation-duration: 200ms;
animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1); animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1),
opacity cubic-bezier(0, 1, 0.4, 1);
.collapse-inner { .collapse-inner {
box-shadow: $box-shadow; box-shadow: $box-shadow;
@ -475,3 +474,25 @@
} }
} }
} }
#accordionSidebar {
width: 14rem;
height: 100vh;
overflow-y: auto;
transition: width 0.3s ease;
&.minimized {
width: 5rem;
}
.nav-item .nav-link {
font-weight: 500;
color: #e3f2fd;
&:hover,
&.active {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.1);
}
}
}

57
base/static/scss/navs/_topbar.scss

@ -80,7 +80,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
border: .125rem solid $white; border: 0.125rem solid $white;
} }
} }
.text-truncate { .text-truncate {
@ -142,3 +142,58 @@
} }
} }
} }
nav {
position: fixed;
z-index: 99;
width: 100%;
background: #242526;
.wrapper {
max-width: 1300px;
margin: auto;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: inline-flex;
li {
list-style: none;
a {
color: #f2f2f2;
padding: 9px 15px;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s ease;
&:hover {
background: #3a3b3c;
}
}
}
}
.drop-menu {
position: absolute;
background: #242526;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
li {
a {
color: #f2f2f2;
}
}
}
&:hover .drop-menu {
visibility: visible;
opacity: 1;
}
}

87
base/static/scss/utilities/_animation.scss

@ -16,7 +16,8 @@
.animated--grow-in { .animated--grow-in {
animation-name: growIn; animation-name: growIn;
animation-duration: 200ms; animation-duration: 200ms;
animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1); animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1),
opacity cubic-bezier(0, 1, 0.4, 1);
} }
// Fade In Animation // Fade In Animation
@ -33,5 +34,87 @@
.animated--fade-in { .animated--fade-in {
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: 200ms; animation-duration: 200ms;
animation-timing-function: opacity cubic-bezier(0,1,.4,1); animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}
/* Existing Loader Spinner */
.loader {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #007bff;
animation: spin 0.6s linear infinite;
margin-left: 8px;
}
/* Keyframes for spinner animation */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader i {
font-size: 1.2em;
color: #007bff;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
.animate-card {
animation: fadeIn 0.5s ease forwards;
}
.animate-card-delay {
animation: fadeIn 0.8s ease forwards;
}
.loader {
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 1s ease-in-out;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loader {
animation: spin 0.6s linear infinite;
} }

43
base/static/scss/utilities/_background.scss

@ -3,7 +3,11 @@
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.bg-gradient-#{$color} { .bg-gradient-#{$color} {
background-color: $value; background-color: $value;
background-image: linear-gradient(180deg, $value 10%, darken($value, 15%) 100%); background-image: linear-gradient(
180deg,
$value 10%,
darken($value, 15%) 100%
);
background-size: cover; background-size: cover;
} }
} }
@ -15,3 +19,40 @@
background-color: $value !important; background-color: $value !important;
} }
} }
#home_intro {
overflow: hidden;
position: relative;
background: linear-gradient(145deg, #f3f4f6, #ffffff);
.background-shape {
position: absolute;
width: 180px;
height: 180px;
background: rgba(0, 123, 255, 0.2);
border-radius: 50%;
filter: blur(60px);
animation: float 5s ease-in-out infinite;
&.shape-1 {
top: -40px;
left: -40px;
}
&.shape-2 {
bottom: -40px;
right: -40px;
animation-delay: 2s;
}
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
}

17
base/static/scss/utilities/_display.scss

@ -2,3 +2,20 @@
.o-hidden { .o-hidden {
overflow: hidden !important; overflow: hidden !important;
} }
#wrapper {
transition: all 0.3s ease;
}
#content-wrapper {
transition: margin-left 0.3s ease;
margin-left: 14rem;
&.expanded {
margin-left: 14rem;
}
&.collapsed {
margin-left: 7rem;
}
}

60
base/static/scss/utilities/_forms.scss Normal file

@ -0,0 +1,60 @@
.form-group label {
font-size: 14px;
font-weight: 600;
color: #6c757d;
}
.selectpicker {
font-size: 14px;
padding: 8px;
}
.form-check-inline .form-check-label {
margin-left: 5px;
font-size: 14px;
}
.d-flex.flex-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form-check-input {
margin-top: 5px;
}
.form-check-input:checked + label {
font-weight: bold;
color: #007bff;
}
.form-check-input {
margin-right: 10px;
&:checked + label {
font-weight: bold;
color: #007bff;
}
}
.radio-inputs {
display: flex;
flex-wrap: wrap;
padding: 0.25rem;
background-color: #eee;
.radio {
flex: 1;
text-align: center;
.name {
padding: 0.5rem;
cursor: pointer;
&:hover {
background-color: #fff;
}
}
}
}

44
base/static/scss/utilities/_modals.scss Normal file

@ -0,0 +1,44 @@
#deleteFileModal .modal-content {
border-radius: 4px;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#deleteFileModal .modal-header {
padding: 0.5rem 1rem;
border-bottom: none;
}
#deleteFileModal .modal-title {
font-size: 1rem;
color: #d9534f;
}
#modelAnalysisModal .modal-content {
max-height: 80vh;
overflow-y: auto;
}
#modelAnalysisModal .modal-footer {
position: sticky;
bottom: 0;
z-index: 1050;
background-color: #fff;
border-top: 1px solid #dee2e6;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
#modelAnalysisModal .modal-content {
max-height: 80vh;
overflow-y: auto;
.modal-body {
padding: 20px;
}
.nav-tabs {
position: sticky;
top: 0;
background-color: #f8f9fa;
}
}

22
base/static/scss/utilities/_progress.scss

@ -1,3 +1,23 @@
.progress-sm { .progress-sm {
height: .5rem; height: 0.5rem;
}
.custom-range {
width: 100%;
}
#slider {
height: 8px;
background-color: #007bff;
border-radius: 5px;
}
#slider::-webkit-slider-thumb,
#slider::-moz-range-thumb,
#slider::-ms-thumb {
background-color: #fff;
border: 2px solid #007bff;
height: 18px;
width: 18px;
border-radius: 50%;
} }

117
base/static/scss/utilities/_responsiveness.scss Normal file

@ -0,0 +1,117 @@
@media (max-width: 768px) {
.form-group {
margin-bottom: 15px;
}
.form-row .form-group {
margin-bottom: 10px;
}
.card-body {
padding: 15px;
}
#accordionSidebar {
width: 100%;
height: auto;
position: relative;
transition: none;
}
#content-wrapper {
margin-left: 0;
}
}
/* Intro Section Styling */
#home_intro {
position: relative;
background: linear-gradient(145deg, #f3f4f6, #ffffff);
overflow: hidden; /* Prevents any overflowing content */
}
#home_intro .background-shape {
position: absolute;
width: 150px;
height: 150px;
background: rgba(0, 123, 255, 0.2);
border-radius: 50%;
filter: blur(60px);
z-index: 0;
animation: float 5s ease-in-out infinite;
}
#home_intro .background-shape.shape-1 {
top: -50px;
left: -50px;
}
#home_intro .background-shape.shape-2 {
bottom: -50px;
right: -50px;
animation-delay: 2s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(15px);
}
}
/* Logo Styling */
.logos {
display: flex;
justify-content: center;
align-items: center;
gap: 40px; /* Increased space between logos */
flex-wrap: wrap; /* Allows wrapping on smaller screens */
max-width: 100%;
overflow: hidden;
}
.logo {
max-width: 300px; /* Larger logo size */
max-height: 200px; /* Larger height */
object-fit: contain; /* Maintain aspect ratio */
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
transition: transform 0.3s ease, filter 0.3s ease;
}
.logo:hover {
transform: scale(1.1);
filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.2));
}
/* Typography and content alignment */
.intro-content {
position: relative;
z-index: 1;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
#home_intro {
padding: 40px 20px;
}
.logos {
gap: 20px; /* Reduced space between logos for smaller screens */
}
.logo {
max-width: 200px; /* Adjusted size for smaller screens */
max-height: 150px;
}
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
}

41
base/static/scss/utilities/_tables.scss Normal file

@ -0,0 +1,41 @@
.table-responsive {
max-height: 500px;
overflow-y: auto;
}
.table-bordered {
border: 1px solid #ddd;
}
.sticky-top-table table thead tr {
position: sticky;
top: 0;
background-color: #f1f1f1;
color: #555;
font-weight: bold;
z-index: 10;
}
.dataframe {
font-family: Arial, sans-serif;
font-size: 0.9em;
thead tr {
text-align: left;
font-weight: bold;
}
th,
td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
}
tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
tbody tr:hover {
background-color: #e8e5f9;
}
}

20
base/static/scss/utilities/_text.scss

@ -1,7 +1,7 @@
// Grayscale Text Utilities // Grayscale Text Utilities
.text-xs { .text-xs {
font-size: .7rem; font-size: 0.7rem;
} }
.text-lg { .text-lg {
@ -52,3 +52,21 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.minimal-section-title {
font-size: 1.8rem;
font-weight: 500;
color: #333;
border-left: 4px solid #007bff;
padding-left: 15px;
margin-bottom: 30px;
}
.cool-separator hr {
height: 1px;
background: linear-gradient(to right, #007bff, transparent, #007bff);
}
.blur-effect {
transition: filter 0.3s ease, opacity 0.3s ease;
}

144
base/templates/base/home.html

@ -27,86 +27,114 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="about-project-section py-5 position-relative"> <div class="about-project-section py-5 position-relative">
<div class="container" style="padding-top:250px;"> <div class="container" style="padding-top:250px;">
<!-- Main Section with Split Layout --> <!-- Main Section with Split Layout -->
<div class="about-project-section py-5 position-relative fade-in"> <div class="about-dashboard-section py-5 bg-light position-relative">
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<!-- Content Section --> <!-- Left Column: Image -->
<div class="col-lg-7"> <div class="col-md-6 text-center">
<h2 class="h4 text-dark mb-3 fade-in">About the Extremum Dashboard</h2>
<p class="text-muted fade-in">
The <strong>Extremum Dashboard</strong>, developed by <strong>Stockholm University</strong>, is part of the
<a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="text-primary">EXTREMUM project</a>. It combines advanced AI with ethical practices to improve healthcare outcomes.
</p>
<ul class="list-unstyled mt-4 fade-in">
<li class="mb-3">
<i class="fas fa-layer-group text-primary mr-2"></i>
<strong>Unified Data Representation:</strong> Seamlessly integrate complex medical datasets.
</li>
<li class="mb-3">
<i class="fas fa-brain text-success mr-2"></i>
<strong>Explainable Predictive Models:</strong> Build AI solutions that are interpretable and reliable.
</li>
<li class="mb-3">
<i class="fas fa-balance-scale text-warning mr-2"></i>
<strong>Ethical Compliance:</strong> Ensure AI aligns with ethical and legal standards.
</li>
</ul>
<button class="btn btn-primary rounded-pill px-4 mt-4 fade-in" type="button" data-toggle="collapse" data-target="#extremumDetails" aria-expanded="false" aria-controls="extremumDetails">
Learn More <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
<!-- Image Section -->
<div class="col-lg-5 text-center">
<img src="https://datascience.dsv.su.se/img/logo/dsgroup.png" <img src="https://datascience.dsv.su.se/img/logo/dsgroup.png"
alt="EXTREMUM Visualization" alt="Extremum Dashboard Visualization"
class="img-fluid rounded shadow-lg fade-in" class="img-fluid rounded shadow-lg fade-in"
loading="lazy" style="max-height: 300px;"
style="max-height: 250px;"> loading="lazy">
</div>
</div>
</div>
</div> </div>
<!-- Right Column: Text Content -->
<div class="collapse mt-4 fade-in" id="extremumDetails"> <div class="col-md-6">
<div class="text-muted mx-auto" style="max-width: 700px;"> <div class="content-box px-4">
<h4 class="h5 text-dark text-center mb-3">About the EXTREMUM Project</h4> <h2 class="h4 text-primary mb-3 fade-in">The Extremum Dashboard</h2>
<p> <p class="text-muted fade-in">
The <strong>EXTREMUM Project</strong> focuses on developing an explainable machine learning platform to analyze complex medical data. It addresses two key healthcare areas: The <strong>Extremum Dashboard</strong>, developed by <strong>Stockholm University</strong>, is a cornerstone of the
<a href="https://datascience.dsv.su.se/projects/extremum.html"
target="_blank"
class="text-primary">EXTREMUM project</a>. This interactive platform merges cutting-edge AI and ethical considerations to drive transformative insights in healthcare.
</p> </p>
<ul class="list-unstyled text-center my-4">
<li class="mb-3"> <ul class="list-unstyled mt-4 fade-in">
<i class="fas fa-heartbeat text-danger"></i> <li class="mb-3 d-flex align-items-start">
<span class="ml-2">Adverse Drug Event Detection</span> <i class="fas fa-layer-group text-primary fa-lg mr-3"></i>
<div>
<strong>Unified Data Representation:</strong>
Integrates diverse medical datasets for seamless analysis.
</div>
</li> </li>
<li> <li class="mb-3 d-flex align-items-start">
<i class="fas fa-stethoscope text-info"></i> <i class="fas fa-brain text-success fa-lg mr-3"></i>
<span class="ml-2">Cardiovascular Disease Detection</span> <div>
<strong>Explainable Predictive Models:</strong>
Builds interpretable and reliable AI solutions.
</div>
</li>
<li class="d-flex align-items-start">
<i class="fas fa-balance-scale text-warning fa-lg mr-3"></i>
<div>
<strong>Ethical Compliance:</strong>
Ensures AI development aligns with legal and moral standards.
</div>
</li> </li>
</ul> </ul>
<p> </div>
This project integrates medical data sources, builds interpretable predictive models, and ensures ethical integrity in machine learning. </div>
</p> </div>
<p class="text-center">
<a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="btn btn-outline-primary rounded-pill">
Learn More
</a>
</p>
</div> </div>
</div> </div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="content-box px-4">
<h2 class="h4 text-primary mb-3 fade-in">The EXTREMUM Project</h2>
<p class="text-muted fade-in">
The <strong>EXTREMUM Project</strong> focuses on developing explainable machine learning platforms for healthcare. It targets two primary applications:
</p>
<ul class="list-unstyled mt-4 fade-in">
<li class="mb-3 d-flex align-items-start">
<i class="fas fa-heartbeat text-danger fa-lg mr-3"></i>
<div>
<strong>Adverse Drug Event Detection:</strong>
Advanced techniques to identify and analyze drug-related adverse events.
</div>
</li>
<li class="d-flex align-items-start">
<i class="fas fa-stethoscope text-info fa-lg mr-3"></i>
<div>
<strong>Cardiovascular Disease Detection:</strong>
Tools to improve early detection and treatment outcomes.
</div>
</li>
</ul>
<p class="text-muted fade-in">
By integrating data sources, building interpretable models, and adhering to ethical principles, the project drives advancements in AI-driven healthcare solutions.
</p>
<div class="mt-4 text-center">
<a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="btn btn-outline-primary rounded-pill px-4 fade-in">
Learn More <i class="fas fa-chevron-right ml-2"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<img src="{% static 'img/heart.jpg' %}" alt="Digital Features Logo" style="max-height: 300px;" class="logo df-logo mx-3 img-fluid rounded shadow-lg fade-in" >
</div>
</div>
</div>
<!-- Feature Carousel Section --> <!-- Feature Carousel Section -->
<div class="feature-carousel py-5 bg-light mt-5 fade-in"> <div class="feature-carousel py-5 bg-light mt-5 fade-in">
<div class="container"> <div class="container">
<h3 class="h4 text-dark text-center mb-4">Key Innovations in EXTREMUM</h3> <h3 class="h4 text-dark text-center mb-4">Key Innovations in Extremum Dashboard</h3>
<p class="text-muted text-center mx-auto mb-5" style="max-width: 700px;"> <p class="text-muted text-center mx-auto mb-5" style="max-width: 700px;">
Discover the powerful tools and methodologies developed under the EXTREMUM project, designed to revolutionize explainable AI for healthcare applications. Discover the powerful tools and methodologies developed under the EXTREMUM project, designed to revolutionize explainable AI for healthcare applications.
</p> </p>

BIN
db.sqlite3

Binary file not shown.