css/analysis.css
.main-dashboard-div {
background-color:#f9f9f9;
font-family: 'Lato', sans-serif;
height: 61vh;
width: 212vh;
}
.icon-light {
color: black;
margin-right: 5px;
}
.dropdown-menu {
left: 30px;
}
.h4 {
margin: 20px 0px;
font-family: 'Roboto Mono', monospace;
font-size: 20px;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
}
.custom-navbar {
background-color: #ededed;
}
.infection-field, .file-upload-field {
margin-top: 45px;
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
height: 60px;
}
.custom-navbar {
background-color: #ededed;
position: absolute;
top: 3px;
width: 100%;
}
.genetic-circle{
background:radial-gradient(purple, transparent);
width: 100px;
height: 100px;
position: absolute;
top: 127px;
left: 414px;
border-radius: 54px;
border: dotted mintcream;
animation: bounce 3.5s infinite alternate-reverse;
}
@keyframes bounce {
0%{
transform: translate(414px,0px);
}
25%{
transform: translate(300px,0px);
}
40%{
transform: translate(200px,0px);
}
65%{
transform: translate(100px,0px);
}
95%{
transform: translate(50px,0px);
}
100%{
transform: translate(10px,0px);
}
}
.img-class{
position: absolute;
left: 2px;
width: 398px;
top: -2px;
border: none;
}
.images{
position: absolute;
width: 304px;
left: -2px;
top: -9px;
height:212px;
}
.card-body-text{
position: absolute;
left: -2px;
top: 188px;
width: 315px;
font-size:large;
}
.description{
position: absolute;
width: 397px;
left:2px;
height:227px;
border-radius: 54px;
top: 214px;
}
.proteins-box-0{
background: plum;
height: 50px;
width: 50px;
position: absolute;
left: 63px;
top: 286px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-1{
background: silver;
height: 50px;
width: 50px;
position: absolute;
left: 113px;
top: 286px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-2{
background:hotpink;
height: 50px;
width: 50px;
position: absolute;
left: 63px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-3{
background:orange;
height: 50px;
width: 50px;
position: absolute;
left: 113px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-4{
background:crimson;
height: 50px;
width: 50px;
position: absolute;
left: 163px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-5{
background:blue;
height: 50px;
width: 50px;
position: absolute;
left: 213px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-6{
background:skyblue;
height: 50px;
width: 50px;
position: absolute;
left: 263px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-7{
background:olive;
height: 50px;
width: 50px;
position: absolute;
left: 313px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-8{
background:blueviolet;
height: 50px;
width: 50px;
position: absolute;
left: 363px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-9{
background:green;
height: 50px;
width: 50px;
position: absolute;
left: 413px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-10{
background:red;
height: 50px;
width: 50px;
position: absolute;
left: 776px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-11{
background:yellow;
height: 50px;
width: 50px;
position: absolute;
left: 826px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-12{
background:chartreuse;
height: 50px;
width: 50px;
position: absolute;
left: 876px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-13{
background:cornflowerblue;
height: 50px;
width: 50px;
position: absolute;
left: 926px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-14{
background:cadetblue;
height: 50px;
width: 50px;
position: absolute;
left: 976px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-15{
background:cyan;
height: 50px;
width: 50px;
position: absolute;
left: 1026px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-16{
background:tomato;
height: 50px;
width: 50px;
position: absolute;
left: 1076px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-17{
background:sienna;
height: 50px;
width: 50px;
position: absolute;
left: 1126px;
top: 336px;
box-shadow:5px 5px whitesmoke;
z-index: auto;
border-radius: 15px;
}
.proteins-box-18{
background:gold;
height: 50px;
width: 50px;
position: absolute;
left: 1076px;
top: 286px;
/* box-shadow:5px 5px whitesmoke; */
z-index: auto;
border-radius: 15px;
}
.proteins-box-19{
background:blueviolet;
height: 50px;
width: 50px;
position: absolute;
left: 1126px;
top: 286px;
/* box-shadow:5px 5px whitesmoke; */
z-index: auto;
border-radius: 15px;
}
.result{
position: absolute;
left: 34px;
color: seashell;
top: 33px;
}
.btn-link:hover{
color: white;
}
.btn-link{
color: white;
position: absolute;
left: 7px;
top: 8px;
}
.container-btn{
position: absolute;
top:339px;
left:593px;
}
.backbtn{
height: 45px;
width: 45px;
position: absolute;
left: 25px;
top: 252px;
transform: scale(1);
/* animation: slide-left 4s linear infinite alternate; */
}
.chevron-icon{
position: relative;
top:6px;
}
@keyframes slide-left {
5%{
left:-120px;
}
20%{
left:-100px;
}
35%{
left:-80px;
}
50%{
left:-60px;
}
55%{
left: -40px;
}
60%{
left: -20px;
}
70%{
left: 20px;
}
}
.matices{
display:flex;
position:absolute;
top: 11px;
transform:scale(1.0);
color: floralwhite;
left: 22px;
background:darkcyan;
border:none;
/* visibility: hidden; */
}
.menu-div{
position:absolute;
display: flex;
height: 676px;
width: 90px;
background-color: whitesmoke;
top: 89px;
left:1204px;
border-radius: 20px;
}
/* .chart-container{
display: flex;
position: absolute;
top:-5px;
left:91px;
} */
.progress-circle{
display: flex;
animation: circles 7s ease-in-out infinite alternate;
color: darkgrey;
position: absolute;
}
@keyframes circles {
10%{
transform: rotate3d(1,1,1,45deg);
color: transparent;
box-shadow: 5px 5px whitesmoke;
z-index: 1;
border-radius: 11px;
border: 1px solid whitesmoke;
}
20%{
/* color: lightgrey; */
box-shadow: 5px 5px whitesmoke;
z-index: 1;
transform: rotate3d(1,1,1,40deg);
border-radius: 11px;
border:1px solid whitesmoke;
}
30%{
box-shadow: 5px 5px whitesmoke;
z-index: 1;
transform: rotate3d(1,1,1,35deg);
border-radius: 11px;
border: 1px solid whitesmoke;
}
40%{
color: lightgrey;
box-shadow: 5px 5px lightgrey;
z-index: 1;
transform: rotate3d(1,1,1,30deg);
border-radius: 11px;
border:1px solid lightgrey;
}
50%{
box-shadow: 5px 5px lightgrey;
z-index: 1;
transform: rotate3d(1,1,1,25deg);
border-radius: 11px;
border: 1px solid lightgrey;
}
60%{
color: darkgrey;
box-shadow: 5px 5px darkgrey;
z-index: 1;
transform: rotate3d(1,1,1,20deg);
border-radius: 11px;
border: 1px solid darkgrey;
}
70%{
box-shadow: 5px 5px darkgrey;
z-index: 1;
transform: rotate3d(1,1,1,15deg);
border-radius: 11px;
border: 1px solid darkgrey;
}
80%{
color: grey;
box-shadow: 5px 5px grey;
z-index: 1;
transform: translate(1,1,1, 10deg);
border-radius: 11px;
border: 1px solid darkgrey;
}
90%{
box-shadow: 5px 5px grey;
z-index: 1;
transform: rotate3d(1,1,1,5deg);
border-radius: 11px;
border: 1px solid gray;
}
100%{
color: black;
box-shadow: 5px 5px black;
z-index: 1;
transform:rotate(1,1,1,0deg);
border-radius: 11px;
border: 1px solid black;
}
}
.fa-flask{
animation : reaction 60s infinite alternate ;
}
@keyframes reaction {
25%{
color: red;
}
50%{
color: green;
}
75%{
color: yellow;
}
100%{
color: blue;
}
}
.fa-clock-o{
animation: circle 60s infinite alternate;
}
@keyframes circle {
50%{
color: red;
}
100%{
color: green;
}
}
.fa-sun-o{
animation: sun 20s linear infinite alternate;
}
@keyframes sun {
30%{
color: yellow;
}
60%{
color : gold;
}
90%{
color : orange;
}
}