Created
January 16, 2021 22:39
-
-
Save rashmibanthia/fd506b20f7b1507f046a8a91f1b29267 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
;( function ( document, window, index ) | |
{ | |
var inputs = document.querySelectorAll( '.inputfile' ); | |
Array.prototype.forEach.call( inputs, function( input ) | |
{ | |
var label = input.nextElementSibling, | |
labelVal = label.innerHTML; | |
input.addEventListener( 'change', function( e ) | |
{ | |
var fileName = ''; | |
if( this.files && this.files.length > 1 ) | |
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); | |
else | |
fileName = e.target.value.split( '\\' ).pop(); | |
if( fileName ) | |
label.querySelector( 'span' ).innerHTML = fileName; | |
else | |
label.innerHTML = labelVal; | |
}); | |
// Firefox bug fix | |
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); | |
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); }); | |
}); | |
}( document, window, 0 )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------------------ | |
Controls the page setting and Background Image | |
------------------------------------------------*/ | |
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300); | |
html { | |
/*background-image: linear-gradient(to right , #cb2d3e , #ef473a);*/ | |
background: url(/static/images/dog_background.jpg); | |
/*background-position: center;*/ | |
background-size: cover; | |
background-repeat: no-repeat; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} | |
body { | |
font-family: 'Lato', sans-serif; | |
} | |
/*------------------------------------------------ | |
Title / Headline | |
------------------------------------------------*/ | |
.headline { | |
position: absolute; | |
left: 50%; | |
transform: translate(-50%,50%); | |
/*background: #2f3640;*/ | |
height: 20px; | |
border-radius: 40px; | |
padding: 10px; | |
color: #2f3640; | |
} | |
.title { | |
top: 25%; | |
font-size:40px; | |
font-family: American Typewriter, serif; | |
} | |
.subtitle1 { | |
top: 35%; | |
font-size: 18px; | |
} | |
.subtitle2 { | |
top: 52%; | |
font-size: 18px; | |
} | |
/*------------------------------------------------ | |
Second Input Box | |
Upload Image to find similar Image | |
------------------------------------------------*/ | |
.searchBox { | |
position: absolute; | |
top: 44%; | |
left: 50%; | |
transform: translate(-50%,50%); | |
background: #2f3640; | |
/*height: 40px;*/ | |
border-radius: 40px; | |
padding: 10px; | |
} | |
.searchBox:hover > .searchInput { | |
width: 240px; | |
padding: 0 6px; | |
} | |
.searchBox:hover > .searchButton { | |
background: white; | |
fill : #2f3640; | |
} | |
.searchButton { | |
/*fill: white;*/ | |
color: white; | |
float: right; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #2f3640; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
transition: 0.4s; | |
} | |
.searchInput { | |
border:none; | |
background: none; | |
outline:none; | |
float:left; | |
padding: 0; | |
color: white; | |
font-size: 16px; | |
transition: 0.4s; | |
line-height: 40px; | |
width: 0px; | |
} | |
/*------------------------------------------------ | |
Second Input Box | |
Upload Image to find similar Image | |
------------------------------------------------*/ | |
/*label { | |
cursor: pointer; | |
}*/ | |
.inputfile { | |
width: 0.1px; | |
height: 0.1px; | |
opacity: 0; | |
overflow: hidden; | |
position: absolute; | |
z-index: -1; | |
} | |
.inputfile + label { | |
font-size: 16px; | |
/*font-size: 1.25em;*/ | |
/*font-weight: 700;*/ | |
display: inline-block; | |
cursor: pointer; /* "hand" cursor */ | |
} | |
/*.inputfile:focus + label, | |
.inputfile + label:hover { | |
background-color: #2f3640; | |
color: lightgrey; | |
border: 2px solid #2f3640; | |
padding: 10px; | |
border-radius: 40px; | |
}*/ | |
.inputfile:focus + label { | |
outline: 1px dotted #000; | |
outline: -webkit-focus-ring-color auto 5px; | |
} | |
.inputfile + label svg { | |
width: 1em; | |
height: 1em; | |
vertical-align: middle; | |
fill: currentColor; | |
margin-top: -0.25em; | |
/* 4px */ | |
margin-right: 0.25em; | |
/* 4px */ | |
} | |
.inputfile-2:focus + label, | |
.inputfile-2.has-focus + label, | |
.inputfile-2 + label:hover { | |
color: #722040; | |
} | |
.uploadBox { | |
background: #2f3640; | |
color: lightgrey; | |
border: 2px solid #2f3640; | |
padding: 10px; | |
border-radius: 40px; | |
position: absolute; | |
top: 53%; | |
left: 50%; | |
transform: translate(-50%,50%); | |
border-radius: 40px; | |
text-anchor: center; | |
text-align: center; | |
} | |
.uploadBox:hover { | |
background: transparent; | |
color: #2f3640; | |
border: 2px solid currentColor; | |
padding: 10px; | |
border-radius: 40px; | |
fill: #2f3640; | |
} | |
.uploadButton { | |
background: lightgrey; | |
} | |
.uploadButton:hover { | |
cursor: pointer; | |
} | |
/*------------------------------------------------ | |
Button to go back to main page | |
------------------------------------------------*/ | |
.backHome{ | |
position: absolute; | |
top: 85%; | |
left: 50%; | |
transform: translate(-50%,50%); | |
/*background: #2f3640;*/ | |
height: 20px; | |
border-radius: 40px; | |
padding: 10px; | |
color: #2f3640; | |
font-family: American Typewriter, serif; | |
font-size:15px; | |
} | |
/*------------------------------------------------ | |
Setting for Image Result page | |
------------------------------------------------*/ | |
.image-title { | |
position: absolute; | |
top: 10%; | |
left: 50%; | |
transform: translate(-50%,50%); | |
/*background: #2f3640;*/ | |
height: 20px; | |
border-radius: 40px; | |
padding: 10px; | |
color: #2f3640; | |
font-family: American Typewriter, serif; | |
font-size:35px; | |
text-align: center; | |
} | |
.image-subtitle { | |
position: absolute; | |
top: 17%; | |
left: 50%; | |
transform: translate(-50%,50%); | |
/*background: #2f3640;*/ | |
height: 20px; | |
border-radius: 40px; | |
padding: 10px; | |
color: #2f3640; | |
font-family: American Typewriter, serif; | |
font-size:20px; | |
text-align: center; | |
} | |
.image-result{ | |
position: absolute; | |
/*top: 50%;*/ | |
left: 50%; | |
transform: translate(-50%,50%); | |
height: 350px; | |
border-radius: 40px; | |
padding: 10px; | |
} | |
.carousel { | |
max-height: 500px; | |
overflow: hidden; | |
.item img { | |
width: 100%; | |
height: auto; | |
} | |
} | |
.carousel-caption { | |
top: 0; | |
bottom: auto; | |
} | |
/* ------------------------------------------------- | |
Displaying side by side images for cosine similarity | |
-------------------------------------------------*/ | |
.image-result_ori{ | |
position: absolute; | |
/*top: 50%;*/ | |
left: 50%; | |
transform: translate(-100%,50%); | |
height: 350px; | |
border-radius: 40px; | |
padding: 10px; | |
} | |
.image-result_sim{ | |
position: absolute; | |
/*top: 50%;*/ | |
left: 50%; | |
transform: translate(0%,50%); | |
height: 350px; | |
border-radius: 40px; | |
padding: 10px; | |
} | |
@media screen and (max-width: 620px) { | |
.searchBox:hover > .searchInput { | |
width: 150px; | |
padding: 0 6px; | |
} | |
.uploadBox:hover > .uploadInput { | |
width: 150px; | |
padding: 0 6px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment