<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Intelligent Document Finder | Home</title>
    <link rel="icon" type="image/ico" href="{{url_for('static' , filename = 'icons/loupe.svg')}}">
    <link rel="stylesheet" href="{{ url_for('static' , filename = 'style.css') }}">

    
    
</head>

<body onreload="mainfunction()">

    <div class="complete_body_overlay" id="complete_body_overlay"></div>

    <div id="gif_holder_id" class="gif_holder_id"  style="display: none;height: 100vh; background-color: #ffffff;">
        <div style="height: 40vh;"></div>
        <div class="outer_gif_container">
            <div class="gif_container">
                <img src="{{ url_for('static', filename = 'icons/362.gif') }}" alt="" srcset="">
            </div>
        </div>
        <div class="text_for_gif_container">
            Please wait... file is uploading :)
        </div>

    </div>

    <input style="display: none;" class="exception_text_holder" id="exception_text_holder" value="{{ page_exception_text }}">


    <div class="complete_container" id="complete_container">


    <!-- front_body starts -->
        <div class="front_body" id="front_body">
            <div class="navbar_holder">
                <nav class="navbar">
                    <ul class="navbar_list">
                        <li><a href="#front_body" class="scroll" id="home_nav">Home</a></li>
                        <li><a href="#about" class="scroll" id="about_nav">About</a></li>
                        <li><a href="#search" class="scroll" id="search_nav">Search</a></li>
                        <li><a href="#upload" class="scroll" id="upload_nav">Upload</a></li>
                        
                    </ul>
                </nav>
            </div>
            <div class="front_banner_holder"> 
                
            <div class="space_bet_ban_name_logo"></div>
                <div class="logo_name">
                   
                </div>
                <div class="banner_name">    
                    <div class="name_top">
                        INTELLIGENT DOCUMENT
                    </div>
                    <div class="name_bottom">
                        FINDER
                    </div>
                </div>
            </div>
        </div>
    <!-- front-body ends -->
    
    <!-- middle_body_starts -->
    <div class="middle_body">
        <div class="about_container" id="about">
            <div class="about_text">
                <p class="about_text_para">
                    How easy do you find it to remember the exact location of a document that you created last year? Not very easy, right? We deal with hundreds of documents daily and forget about them most of the time.
                    <br><br>
                    But what if we want that old documentation again for your work, but unfortunately you do not remember the name or content of that document to retrieve it from the large storage of your computer.
                    <br><br>
                    In such cases, we make use of a document finder, which can search for the document of our need based on a query input. This will not only help in faster access to the document, but will also help in grouping similar documents together and in analysing them.
                </p>
                <hr class="about_under_line">
            </div>
        </div>

        <p class="our_team_tag"><b>Our</b> Team</p>

        <div class="team_container">
            <div class="card">
                <div class="card_info">
                    <div class="card_free_space"></div>
                    <div class="user_image">
                        <img src="{{url_for('static' , filename = 'sarthak.jpeg')}}" alt="" srcset="">
                    </div>
                    <div class="about_user">
                        <div class="user_name">
                            Sarthak Jain
                            <p>
                                AI - NLP and Computer Vision Enthusiast
                            </p>
                        </div>
                        <div class="user_sites_holder">
                            <ul>
                                <li>
                                    <a href="/nopage"><img src="{{url_for('static' , filename='icons/facebook.svg')}}"></a>
                                </li>
                                <li>
                                    <a href="/nopage"><img src="{{url_for('static' , filename='icons/twitter.svg')}}"></a>
                                </li>
                                <li>
                                    <a href="https://linkedin.com/in/sarthak-jain-58b466170"><img src="{{url_for('static' , filename='icons/linkedin.svg')}}" ></a>
                                </li>
                                <li>
                                    <a href="https://github.com/Sarthakjain1206"><img src="{{url_for('static' , filename='icons/github-image.svg')}}"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card_info">
                    <div class="car_free_space"></div>
                    <div class="user_image">
                        <img src="{{url_for('static' , filename = 'my_image.jpg')}}" alt="" srcset="">
                    </div>
                    <div class="about_user">
                        <div class="user_name">
                            Rishabh Mishra
                            <p>
                                FULL STACK WEB DEVELOPER
                            </p>
                        </div>
                        <div class="user_sites_holder">
                            <div class="user_social_sites">
                               <ul>
                                    <li>
                                        <a href="/nopage"><img src="{{url_for('static' , filename='icons/facebook.svg')}}"></a>
                                    </li>
                                    <li>
                                        <a href="https://twitter.com/r_ishabhmishra"><img src="{{url_for('static' , filename='icons/twitter.svg')}}"></a>
                                    </li>
                                    <li>
                                        <a href="https://linkedin.com/in/rishabh-mishra-3a6985167"><img src="{{url_for('static' , filename='icons/linkedin.svg')}}"></a>
                                    </li>
                                    <li>
                                        <a href="https://github.com/rishabhm74"><img src="{{url_for('static' , filename='icons/github-image.svg')}}"></a>
                                    </li>
                                    </ul>  
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- middle_body_ends -->
    
    <!-- search_body starts -->

  <!--   -->

    <div id="search">
    <!--filter starts -->
<div class="the_outer_wrapper" id="the_outer_wrapper">
    <div class="filter_outer_holder"   id="filter_outer_holder"  >
        <div class="filter_body">
            <div class="filter_body_title">
                <div class="filter_body_title_head">
                    Filters
                    
                </div>
                <span class="the_extra_span">
                    <span class="close_filter_menu_button_span">
                        <button onclick="close_filter_menu()" class="close_filter_menu_button_button">
                        <img class="close_filter_menu_icon" src="{{ url_for('static', filename='cross.svg') }}">
                    </button></span>
                </span>
            </div>
            
            <div class="available_filter_list">

                <div class="available_filters_holder">
                    <p>Available Filters </p>

                        <li class="filter_li"><button class="filter_button" onclick="select_this_type(this)">Search by Relevance</button></li>

                        <li class="filter_li"><button class="filter_button" onclick="select_this_type(this)">Search by Tag</button></li>

                        <li class="filter_li"><button class="filter_button" onclick="select_this_type(this)">Search by Title</button></li>
                    
                    
                </div>

            </div>
            <div class="selected_filter_list">
                <p>Selected Filter</p>
                <li class="selected_li"><button class="selected_button " id="selected_button" value=""></button></li>
                <button class="apply_filter_button" id="apply_filter_button" onclick="apply_filter()">Apply</button>
            </div>
        </div>
    </div>
</div>
<!--filter ends-->
    <div class="search_body">

        <div class="steps_img_container">
            
        </div>


        <div class="search_bar_outer">
            <div class="search_bar_holder">
                <form action="/search" target="_blank" method="POST" class="search_form">

                    <input type="text" name="search_bar" class="search_bar" id="search_bar" placeholder="Enter something to search...">

                    <input type="text" id="filter_type_name_holder" name="filter_type_name_holder" value="Search by Relevance">

                    <button onclick="empty_search()" type="button" class="empty_button"><img src="{{ url_for('static', filename='cross.svg') }}" alt=""></button>
                    <button type="submit" class="search_button">
                        <img src="{{ url_for('static', filename='search_icon.svg') }}" alt="">
                    </button>
                </form>
            </div>
            <div class="filter_holder">
                <p class="select_filter_p">Select the filter to apply on search results <span class="filter_button_span"><button class="filter_icon_button" onclick="show_filter_menu()"><img class="filter_icon" src="{{ url_for('static', filename='filter.svg') }}"></span></button></p>
            </div>
        </div>

    </div>
    
</div>
<!--<div class="down_arrow"></div> -->


    <!-- search_body ends -->
    


    <!-- upload_body starts -->
    
    <div class="upload_container_outer" id="upload">
        <div class="space_bet_ban_name_logo"></div>
        <br>

        <div class="caution_container">
            <div class="caution_text">
                <b>Caution</b> Please enter the working directory path and then continue
            </div>
            <form action="/path" method="POST" class="path_upload_form">
                <input type="text" name="folder_path" placeholder="Upload folder path..." class="upload_path_input" id="upload_path_input">
                <div class="space"></div>
                <button type="submit" class="path_submit_button">Upload Path</button>
            </form>
            <div class="specified_path">
                <p>Specified path: <span>{% if var_path %}
                    {{ var_path }}
                    {% else %}
                    None
                    {% endif %}
                </span></p>
            </div>
        </div>

        <div class="file_status_outer" id="file_status_outer">
            <div class="file_upload_status" id="file_upload_status">
                <span class="file_status"></span>
                <span class="close_file_status" onclick="close_file_status()">&times;</span>
            </div>
        </div>


        <div class="upload_container" >
            <div class="upload_files_container">

                <form class="file_upload_form" method="post" action="/" enctype="multipart/form-data">
                    <div>
                        <p>
                            <input id="file_drop" class="hidden"  type="file" name="files[]" multiple="true" autocomplete="off"  onchange="runner()">
                            <label class="file_drop_button" for="file_drop">Click here to choose file(s)</label>
                            <div class="" id="checker" name="checker"></div>

                            <input type="text" style="display: none;" name="just_the_tag" id="the_tag_id" value="">
                        </p>
                    </div>
                    
                    <div class="file_upload_form_submit" id="file_upload_form_submit_hidden">
                        <input class="_final_file_upload_button" id="final_file_upload_button" type="submit" 
                        onclick="qwerty_fun()" value="Upload">
                    </div>
                </form>
                <div class="clear_button_container">
                    <button class="clear_button" id="clear_button" onclick="buffer_clear()">
                        Remove uploaded files!
                    </button>
                </div>

            </div>
            <div class="view_files_container">
                <div class="file_list_container" id="file_list_container">
                    No files selected...
                </div>
                <div class="total_files_counter" >
                    <hr>
                    <div id="total_no_files" class="total_no_files" ></div>
                </div>
            </div>
        </div>
    </div>

    <!-- upload body ends -->

    
    <div class="space_bet_ban_name_logo"></div>


    </div>


<br><br><br>

<!-- footer starts -->
<div class="upper_arrow" id="upper_arrow"></div>
<div class="footer" id="footer">
        <div class="upper_footer">
            <div class="left_part">
                <div class="need_help">
                    Have any suggestions, we would love to hear them
                </div>
                
                <div class="share_email"><input type="text" placeholder="Enter your email" type="email"> <button type="submit">Notify</button></div>
            </div>

            <div class="right_part_outer">
                <div class="right_part">
                    <ul>
                        <li>Share</li>
                        <li><a href="#"><img src="{{ url_for('static', filename = 'icons/facebook3.svg') }}"></a></li>
                        <li><a href="#"><img src="{{ url_for('static', filename = 'icons/twitter2.svg') }}"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle_footer">
            Made with <span>&#9829;</span> by Sarthak & Rishabh
        </div>
        <div class="lower_footer">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
</div>

<!-- footer ends -->










</body>

<script type="text/javascript"
         src="{{ url_for('static', filename='jquery.js') }}"></script>

         <script type="text/javascript"
         src="{{ url_for('static', filename='script.js') }}"></script>

<script>

    var temp_array =[];
    //document.getElementById('checker').style.display = 'none';
    document.getElementById('total_no_files').innerHTML = " ";
    document.getElementById('checker').style.display = "none";
    var myarray = [];

    function mycheck(){
        var s = "";
        var my_temp = document.getElementById('tag_input_values').value;
        document.getElementById('checker').innerHTML = my_temp;
        myarray.push(my_temp);
        for(var i = 0; i < myarray.length ; i++){
            //s += myarray[i] + " ";
            //console.log(myarray);
        }
        
        // just temp array
        //console.log(temp_array[0]);

       
    }

    var file_name;
    function runner(){
        var fileList = document.getElementById('file_drop').files;
        if(0 > 1){
            alert("Not more than one file can be uploaded!!!");
        }else{

            document.getElementById('file_list_container').innerHTML = "";
            for(var i = 0 ; i < fileList.length; i++){
                //console.log(fileList[i]);
                document.getElementById('file_list_container').innerHTML += '<p id="file_list_i">' + fileList[i].name + '</p>' + '\n'  + '<input type="text" placeholder="Enter tags for file..." id="files_tags_upload_entry" class="files_tags_upload_entry" name="files_tags_upload_entry" onkeyup="thefunc()">' +'<label  for="final_file_upload_button" class="final_file_upload_button" onclick="pagedisabler()">Upload</label>' ;
                file_name = fileList[i].name;
                //console.log(file_name);
                temp_array.push(file_name); //temp_array holds name of file

        }
        document.getElementById('total_no_files').innerHTML = "Total number of files: " + fileList.length;

        }
        
        
    }


    function qwerty_fun(){
            
            //var cv = document.getElementById('tag_input_values').value;
            //console.log(cv);
        }


    document.getElementById('file_upload_form_submit_hidden').style.display = 'none';

    function buffer_clear(){
        document.getElementById('file_list_container').innerHTML = "No files selected...";
        document.getElementById('total_no_files').innerHTML = "";
        document.getElementById('checker').innerHTML = "";



    }

    function mainfunction(){
        document.getElementById('searchwithtag').value = " ";
        document.getElementById('searchwithtext').value = " ";
    }


    function pagedisabler(){
        document.getElementById('complete_container').style.display = "none";
        document.getElementById('gif_holder_id').style.display = "block";
        document.body.style.backgroundColor = "#fff";
        document.getElementById('footer').style.display = "none"; 
        document.getElementById('upper_arrow').style.display = "none";

        var exception_holder_text;
        exception_holder_text = $('.exception_holder').val();
        //alert(exception_holder_text);
    }
    
    
    </script>
   

    

</html>



