<!DOCTYPE html>
<html>
<head>
	<title>Goverment Portal for Document Visualization</title>

	<!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />

    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#000">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#000">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#000">

    <!-- //Meta tag Keywords -->
    
    <!-- Bootstrap -->
    <!-- CSS only -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- CSS -->

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<style>
 html{
    background-image: linear-gradient(rgb(255, 255, 255), rgb(0, 255, 85));
 }
    .bg {
  width: 100%;
  height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.heads{
display: inline-flex;
margin:20px;
}

img{
    margin-left: 50px;
    margin-right: 50px;
}

.photobanner img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;

	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

.dropdown {
  width: 300px;
  display: inline-block;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8
}
.dropdown.active .select > i {
    transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    overflow: hidden;
    display: none;
    max-height: 144px;
    overflow-y: auto;
    z-index: 9
}
.dropdown .dropdown-menu li {
    padding: 10px;
    transition: all .2s ease-in-out;
    cursor: pointer
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2
}

.file-area {
        width: 450px;
        margin-left: 34%;
        position: relative;
        font-size: 18px;
    }
    .file-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }
    .file-area .file-dummy {
        width: 100%;
        padding: 50px 30px;
        font-size: 20px;
        border: 2px dashed rgb(21, 129, 70);
        background-color: rgb(187, 240, 218);
        text-align: center;
        transition: background 0.3s ease-in-out;
    }
    .file-area .file-dummy .success {
    
        display:none;
    }
    .file-area:hover .file-dummy {
        border: 2px dashed #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy {
        border-color: #1abc9c;
    }
    .file-area input[type=file]:valid + .file-dummy .success {
        display: inline-block;

      
    }
    .file-area input[type=file]:valid + .file-dummy .default {
        display: none;
    }

</style>
<body>
<div class="bg">
    <nav class="navbar-dark bg-dark"><h2 style="padding:20px; color:white;">ChaoticClarity</h2></nav>
      <marquee>
      <div class="photobanner">
      <div class="heads">
          <img class="first"  src = "https://cdn-icons-png.flaticon.com/128/2170/2170919.png" width="80" height="80">
          <img src = "https://cdn-icons-png.flaticon.com/128/4221/4221578.png" width = "80" height ="80">
          <img src = "https://cdn-icons-png.flaticon.com/512/1518/1518636.png" width = "80" height ="80">
          <img src = "https://cdn-icons.flaticon.com/png/128/3088/premium/3088400.png?token=exp=1634398885~hmac=2d9809c58787b57454cfd2dc1273f503" width = "80" height ="80">
          <img src = "https://cdn-icons.flaticon.com/png/128/2112/premium/2112382.png?token=exp=1634398907~hmac=5a73c6eb9a9666dead2b51ed4f53518c" width = "80" height ="80">
          <img src = "https://cdn-icons.flaticon.com/png/128/3045/premium/3045293.png?token=exp=1634398927~hmac=5a92459346dfa07a85b828a644ecb034" width = "80" height ="80">
          <img src = "https://cdn-icons-png.flaticon.com/128/3662/3662574.png" width = "80" height = "80">
          <img src = "https://cdn-icons-png.flaticon.com/128/1257/1257113.png" width = "80" height = "80">
      </div>
      </div>
    </marquee>
    <div style="text-align: center; align-items: center;">  
        
        <h3 style="margin: 30px; "> Select the type of Document Below OR Upload a copy of your document.</h3>
        <div class="dropdown" style="margin-top: 20px; margin-bottom: 20px;">
        <div class="select">
            <span>Select Document Type</span>
            <i class="fa fa-chevron-left"></i>
          </div>
          <input type="hidden" name="docs">
          <ul class="dropdown-menu">
            <li id="a">A</li>
            <li id="b">B</li>
            <li id="c">C</li>
            <li id="d">D</li>
            <li id="e">E</li>
            <li id="f">F</li>
          </ul>
          </div>
          <h3>OR</h3>
        <form action="/upload"  method="POST"  enctype="multipart/form-data">
          <div class="file-area">
            <input type="file" name="someFile" accept="application/pdf" required="required" id="filess" />
            <div class="file-dummy">
                <span class="default">Click to select a file, or drag it here</span>
                <span class="success" style="font-style: italic;">Your file has been selected for upload!</span>
            </div>
        </div>
          
            <input type="submit" class="btn btn-info btn-lg" style="margin-top: 20px; cursor:pointer; width:300px;" name='submit' value="submit">
          </form>
      </div>
  
    </div>
</body>
<script>

$(document).ready(function(){
            $('input[type="file"]').change(function(e){
                var g = e.target.files[0].name;
                g = g + ':- ' + "Your file has been selected for upload!";
                $('.success').text(g);
            });
        });

$('.dropdown').click(function () {
        $(this).attr('tabindex', 1).focus();
        $(this).toggleClass('active');
        $(this).find('.dropdown-menu').slideToggle(300);
    });
    $('.dropdown').focusout(function () {
        $(this).removeClass('active');
        $(this).find('.dropdown-menu').slideUp(300);
    });
    $('.dropdown .dropdown-menu li').click(function () {
        $(this).parents('.dropdown').find('span').text($(this).text());
        $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
    });
</script>
</html>