<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="web.css" rel="stylesheet" />
        <script type="text/javascript">
            window.isMobile = false;
        </script>
    </head>
    <body>
        <div id="home" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-boards">
                        <div class="grid-boards__card">
                            <h2>Boards</h2>
                            <ul class="ulChannels"></ul>
                        </div>
                    </div>
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <div class="thread-create">
                            Share something and see how long it lasts...
                        </div>                        
                        <div class="threadList"></div>
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                            For more information check out the <a href="/about">INTRO</a> or the <a href="#">FAQ</a> pages.
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>                
            </div>                  
        </div>   
        <!--home-->  
        <div id="u-tab" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-boards">
                        <div class="grid-boards__card">
                            <h2>Followed Boards</h2>
                            <ul class="ulChannels"></ul>
                        </div>
                    </div>
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <div class="thread-create" data-toggle="modal" data-target="#modalCreateThread">
                            Share something and see how long it lasts...
                        </div>                        
                        <div class="threadList"></div>
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                            For more information check out the <a href="/about">INTRO</a> or the <a href="#">FAQ</a> pages.
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>                
            </div>                  
        </div>   
        <!--home-->  
        <div id="thread" class="page">
                <div class="mainHeader"></div>
                <div class="grid-container">
                    <div class="grid-row">
                        <div class="grid-boards">
                            <div class="grid-boards__card">
                                <h2>Boards</h2>
                                <ul class="ulChannels"></ul>
                            </div>
                        </div>
                        <div class="grid-col grid-col2 grid-col2--ml">
                            <div class="threadList">
                            </div>
                        </div>
                        <div class="grid-col grid-col3">
                            <div class="tutorial-card">
                                <div class="tutorial-card__row">
                                    <div class="tutorial-card__text">
                                        All posts expire within 24 hours, unless the posts receives Pluses.
                                        Each Plus adds 3 minute to the post..
                                    </div>
                                    <div class="tutorial-card__plus">
                                        <img src="img/plus-sign-large.png" alt="" />
                                    </div>
                                </div>
                                <p>Expiration times are color-coded.</p>
                                <ul>
                                    <li>
                                        <span class="tutorial-card__new">24 hrs</span>
                                    </li>
                                    <li>
                                        <span class="tutorial-card__warning">12 hrs</span>
                                    </li>
                                    <li>
                                        <span class="tutorial-card__expire">3 hrs</span>
                                    </li>
                                </ul>
                                For more information check out the <a href="/about">INTRO</a> or the <a href="#">FAQ</a> pages.
                            </div>
                            <div class="mainFooter"></div>
                        </div>
                    </div>                
                </div>    
        </div>
        <!--thread-->
        <div id="profile" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <div class="user-card">
                            <div class="user-card__avatar">
                                <img id="profileAvatar" class="" width="135" height="135" />
                            </div>
                            <div class="user-card__info">
                                <div id="profileName"></div>
                                <ul>
                                    <li><span id="postCount"></span> Threads</li>
                                    <li><span id="followCount"></span> Following</li>
                                    <li><span id="followerCount"></span> Followers</li>
                                </ul>
                                <a href="#" class="button button--hollow button--textblue button--sm" id="btnFollowProfile"  data-key="" data-count="" style="display:none;"></a>
                                <a href="?section=edit" class="button button--hollow button--textblue button--sm" id="btnEditProfile" style="display:none;">Edit Profile</a>
                            </div>
                        </div>
                        <ul class="nav nav-tabs" id="profileTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="threads-tab" data-toggle="tab" href="#threadsTab" role="tab" aria-controls="threadsTab" aria-selected="true">Threads</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="following-tab" data-toggle="tab" href="#followingTab" role="tab" aria-controls="followingTab" aria-selected="false">Following</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="followers-tab" data-toggle="tab" href="#followerTab" role="tab" aria-controls="followerTab" aria-selected="false">Followers</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="boards-tab" data-toggle="tab" href="#boardTab" role="tab" aria-controls="boardTab" aria-selected="false">Boards</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="profileTabContent">
                            <div class="tab-pane fade show active" id="threadsTab" role="tabpanel" aria-labelledby="threads-tab">
                                <div class="card border-top-0">
                                    <div class="card-body">
                                        <div class="threadList"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="followingTab" role="tabpanel" aria-labelledby="following-tab">
                                <div class="card border-top-0">
                                    <div class="card-body">
                                        <div id="profileFollowing" class="userlist"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="followerTab" role="tabpanel" aria-labelledby="followers-tab">
                                <div class="card border-top-0">
                                    <div class="card-body">
                                        <div id="profileFollowers" class="userlist"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="boardTab" role="tabpanel" aria-labelledby="boards-tab">
                                <div class="card border-top-0">
                                    <div class="card-body">
                                        <div id="profileBoards" class="boardlist"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        <!--profile-->
        <div id="edit" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <form id="frmUpdateProfile" class="card">
                            <div class="card-header">
                                <h5 class="card-title">Upload Avatar</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-center">
                                        <div class="form-group">
                                            <div class="thread-button-wrapper">
                                                <button type="button" class="image-btn-upload"><i class="fas fa-camera"></i> Change Avatar</button>
                                                <input type="file" id="editAvatar" name="editAvatar" class="js-upload-image" accept="image/*, image/heic, image/heif">
                                            </div>
                                        </div>
                                        <img id="editAvatarImage" class="user-image user-image--xl | js-photos js-previews" />
                                        <button type="button" class="button button--sm" id="btnRotateCW"><i class="fas fa-redo"></i></button>
                                        <button type="button" class="button button--sm" id="btnRotateCCW"><i class="fas fa-undo"></i></button>
                                    </div>
                                </div>                                
                            </div>
                        </form>
                        
                        <form id="frmUpdatePassword" class="card">
                            <div class="card-header">
                                <h5 class="card-title">Change Password</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Current Password</label>
                                    <input type="password" name="editCurrentPass" class="form-control" /> 
                                </div>
                                <div class="form-group">
                                    <label>New Password</label>
                                    <input type="password" name="editNewPass" id="editNewPass" class="form-control" /> 
                                </div>
                                <div class="form-group">
                                    <label>Repeat New Password</label>
                                    <input type="password" name="editConfirmPass" class="form-control" /> 
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="button button--hollow button--textblue">Change Password</button>
                            </div>
                        </form>

                        <div class="card">
                            <div class="card-body">
                                <p>Once you delete your profile, it will erase all your information, posts and whatever interactions you have made once your last thread expires.</p>
                                <button type="button" id="btnDeleteProfile" class="button button--hollow button--textblue">Delete Profile</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="boards" class="page"> 
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-boards">
                        <div class="grid-boards__card">
                            <h2>Boards</h2>
                            <ul class="ulChannels"></ul>
                        </div>
                    </div>
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <div class="board-card">
                            <div class="row">
                                <div class="board-card__info">
                                    <h2 id="boardTitle"></h2>
                                    <h4><span id="boardCount"></span> Followers</h4>
                                </div>
                                <div class="board-card__buttons">
                                    <a href="#" id="btnCreateBoardPost" role="button" class="button button--sm button--hollow button--textblue">Post</a>
                                    <a href="#" id="btnFollowBoard" class="button button--sm button--hollow button--textblue" data-key=""><span id="boardStatus"></span> Board</a>
                                </div>
                            </div>
                        </div>
                        <div class="threadList">            
                        </div>
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                            For more information check out the <a href="/about">INTRO</a> or the <a href="#">FAQ</a> pages.
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>                
            </div>   
        </div>
        <!--channel-->
        <div id="searchResults" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-col grid-col1">
                        <div class="channels-card shadow-sm">
                            <h5>Users</h5>
                            <div class="card-body">
                                <div id="userList" class="userlist"></div>
                            </div>
                        </div>    
                    </div>
                    <div class="grid-col grid-col2">
                        <div class="threadList">
                        </div>                        
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>                
            </div> 
        </div>    
        <!--searchresults-->
        <div id="privacy" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-col grid-col2 grid-col2--ml">
                        <h2>Privacy Policy</h2>
                        <p>WaveUX collects and stores user information for postings. Once a post is removed or deleted, it is
                        removed from our web server.</p>
                        <p>We value the privacy of our users, and will not make private information such as IP addresses
                        available to others, except to comply with court orders or to cooperate with law enforcement
                        agencies when appropriate.</p>
                        <p>This Privacy Policy does not apply, and cannot apply, to any third-party websites, services or
                        applications, even if they are accessible through our platform.</p>
                        <p>Our primary goal and reasoning behind collecting information are to provide and improve our
                        platform and to administer your use of the platform (including your Account, if you are an Account
                        holder). If you choose to create an Account, we will collect certain information that can be used to
                        identify you, such as your email address and, if you opt to add it, a photograph or picture. You have
                        the option to choose to provide other information about yourself, which will be made part of your
                        Account's profile ("Profile").</p>
                        <p>We conduct periodic security audits and penetration tests to take reasonable administrative, physical
                        and electronic measures designed to protect the information that we collect from or about you.
                        Our platform may contain links to websites and services that are owned or operated by third parties.
                        Any information that you provide on or to a Third-Party or that is collected by a Third-Party is
                        provided directly to the owner or operator of the Third-Party and is subject to the owner's or
                        operator's privacy policy. We're not responsible for the content, privacy or security practices and
                        policies of any Third-Party.</p>
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>
            </div>                    
        </div>
        <div id="terms" class="page">
            <div class="mainHeader"></div>
            <div class="grid-container">
                <div class="grid-row">
                    <div class="grid-col grid-col2 grid-col2--ml">
                    </div>
                    <div class="grid-col grid-col3">
                        <div class="tutorial-card">
                            <div class="tutorial-card__row">
                                <div class="tutorial-card__text">
                                    All posts expire within 24 hours, unless the posts receives Pluses.
                                    Each Plus adds 3 minute to the post..
                                </div>
                                <div class="tutorial-card__plus">
                                    <img src="img/plus-sign-large.png" alt="" />
                                </div>
                            </div>
                            <p>Expiration times are color-coded.</p>
                            <ul>
                                <li>
                                    <span class="tutorial-card__new">24 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__warning">12 hrs</span>
                                </li>
                                <li>
                                    <span class="tutorial-card__expire">3 hrs</span>
                                </li>
                            </ul>
                        </div>
                        <div class="mainFooter"></div>
                    </div>
                </div>
            </div>                    
        </div>
        <div class="modal" id="modalResetPass" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <form id="frmResetPass" class="modal-content">
                    <div class="modal-header border-bottom-0">
                        Forgot password
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="email" class="form-control" name="resetEmail" id="resetEmail" placeholder="Registered Email" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="button button--hollow button--sm button--textblue">Reset</button>
                    </div>
                </form>    
            </div>
        </div>   
        
        <div class="modal" id="modalThread" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="modalThreadDetail"></div>
                        <div id="modalPosts"></div>
                    </div>
                    <form id="modalComment" class="modal-footer">
                        <input type="hidden" name="commentThread" id="commentThread" value="" />
                        <div class="thread-comment input-group">
                            <input type="text" id="comment" name="comment" class="form-control" placeholder="Comment" />
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-outline-secondary">Send</button>
                            </div>
                        </div><!--thread-comment-->
                    </form>
                </div>    
            </div>
        </div>   

        <div class="modal" id="modalCreateThread" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <form id="threadForm" class="js-chat">
                            <div class="form-group">
                                <select class="custom-select" id="ddlChannels" name="ddlChannels">
                                    <option value="" selected>Select a board</option>
                                </select>
                            </div>                             
                            <div class="form-group emoji-picker-container">
                                <div class="form-control textarea-control chat-content js-editable" contenteditable="true" data-placeholder="Share something and see how long it lasts..." id="editable" data-emojiable="true"></div>
                            </div>
                            <div class="chat-previews js-previews">
                                <div class="chat-data">
                                    <div class="chat-thumbnail js-thumbnail">
                                        <img class="chat-loader js-loader" src="img/ajax-loader.gif" alt="loader" />
                                        <div class="chat-thumbnail-close fas fa-times js-chat-close"></div>
                                    </div>
                                    <div class="chat-og js-og"></div>
                                </div>
                            </div>
                            <div class="chat-video js-video"></div>
                            <ul class="inline-list form-group">
                                <li>
                                    <span class="thread-button-wrapper">
                                        <button type="button" class="image-btn-upload"><i class="fas fa-camera"></i> Photo/Video</button>
                                        <input type="file" id="threadFile" name="threadFile" class="js-upload-image" accept="video/*,  video/x-m4v, video/webm, video/x-ms-wmv, video/x-msvideo, video/3gpp, video/flv, video/x-flv, video/mp4, video/quicktime, video/mpeg, video/ogv, .ts, .mkv, image/*, image/heic, image/heif">
                                    </span>
                                </li>
                            </ul>
                            <div class="chat-button">
                                <button class="button button--blue button--hollow" id="btnThreadCreate" type="submit">Post</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modalAnonCreateThread" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <form id="anonThreadForm" class="js-chat">
                            <div class="form-group">
                                <select class="custom-select" id="ddlAnonChannels" name="ddlAnonChannels">
                                    <option value="" selected>Select a board</option>
                                </select>
                            </div>                             
                            <div class="form-group emoji-picker-container">
                                <div class="form-control textarea-control chat-content js-editable" contenteditable="true" data-placeholder="Share something and see how long it lasts..." id="editable" data-emojiable="true"></div>
                            </div>
                            <div class="chat-previews js-previews">
                                <div class="chat-data">
                                    <div class="chat-thumbnail js-thumbnail">
                                        <img class="chat-loader js-loader" src="img/ajax-loader.gif" alt="loader" />
                                        <div class="chat-thumbnail-close fas fa-times js-chat-close"></div>
                                    </div>
                                    <div class="chat-og js-og"></div>
                                </div>
                            </div>
                            <div class="chat-video js-video"></div>
                            <ul class="inline-list form-group">
                                <li>
                                    <span class="thread-button-wrapper">
                                        <button type="button" class="image-btn-upload"><i class="fas fa-camera"></i> Photo/Video</button>
                                        <input type="file" id="anonThreadFile" name="threadFile" class="js-upload-image" accept="video/*,  video/x-m4v, video/webm, video/x-ms-wmv, video/x-msvideo, video/3gpp, video/flv, video/x-flv, video/mp4, video/quicktime, video/mpeg, video/ogv, .ts, .mkv, image/*, image/heic, image/heif">
                                    </span>
                                </li>
                            </ul>
                            <div class="chat-button">
                                <div id="threadCreateCaptcha" class="js-captcha"></div>
                                <button class="button button--blue button--hollow" id="btnAnonThreadCreate" type="submit">Post</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modalAnonCreatePost" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">                
                <div class="modal-content">
                    <div class="modal-body">
                        <form id="anonPostForm" class="js-chat comment-form--modal">
                            <input type="hidden" name="threadkey" id="anonKey" value="" />
                            <input type="hidden" name="userid" id="anonUserid" value="" />
                            <div class="form-group emoji-picker-container">
                                <div class="form-control textarea-control chat-content js-editable" contenteditable="true" data-placeholder="Write a comment" id="editable" data-emojiable="true"></div>
                            </div>
                            <div class="chat-previews js-previews">
                                <div class="chat-data">
                                    <div class="chat-thumbnail js-thumbnail">
                                        <img class="chat-loader js-loader" src="img/ajax-loader.gif" alt="loader" />
                                        <div class="chat-thumbnail-close fas fa-times js-chat-close"></div>
                                    </div>
                                    <div class="chat-og js-og"></div>
                                </div>
                            </div>
                            <div class="chat-video js-video"></div>
                            <ul class="inline-list form-group">
                                <li>
                                    <span class="thread-button-wrapper">
                                        <button type="button" class="image-btn-upload"><i class="fas fa-camera"></i> Photo/Video</button>
                                        <input type="file" id="anonPostFile" name="anonPostFile" class="js-upload-image" accept="video/*,  video/x-m4v, video/webm, video/x-ms-wmv, video/x-msvideo, video/3gpp, video/flv, video/x-flv, video/mp4, video/quicktime, video/mpeg, video/ogv, .ts, .mkv, image/*, image/heic, image/heif">
                                    </span>
                                </li>
                            </ul>
                            <div class="chat-button">
                                <div id="postCreateCaptcha" class="js-captcha"></div>
                                <button class="button button--blue button--hollow" type="submit">Send</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal" id="modalReportIssue" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">                
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Report an issue</h5>
                    </div>
                    <form id="frmReportIssue" class="modal-body">
                        <div class="form-group">
                            <input type="text" name="reportName" class="form-control" placeholder="Name" id="issueName" />
                        </div>
                        <div class="form-group">
                            <input type="email" name="reportEmail" class="form-control" id="issueEmail" placeholder="Email" />
                        </div>
                        <div class="form-group">
                            <textarea name="reportMessage" class="form-control" placeholder="Describe issue" rows="6"></textarea>
                        </div>
                        <div class="form-group">
                            <div id="reportCreateCaptcha" class="js-captcha"></div>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="button button--hollow button--textblue">Send</button>
                        </div>
                    </form>
                </div>
            </div>                        
        </div>

        <div class="modal" id="modalSearch" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form action="/" class="modal-body">
                        <input type="hidden" name="section" value="searchResults" />
                         <div class="form-group">
                             <input type="search" name="search" class="form-control" />
                         </div>
                         <div class="text-right">
                             <button type="submit" class="button button--hollow button--textblue">Search</button>
                         </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal" id="modalLogin" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">                    
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src="img/logo.png" alt="WaveUX" class="splash-content__logo" />
                        <img src="img/login-logo.png" alt="W" class="splash-content__icon" />

                        <div id="splashAlert" class="alert"></div>
                    
                        <a href="#" id="login-facebook" class="button button--block button--facebook">log in with Facebook</a>
                        <button id="login-google" class="button button--block button--google">log in with Google</button>
                        
                        <form id="frmLogin">
                            <div class="form-group">
                                <input type="email" class="splash-input" name="email" placeholder="Email" id="loginEmail" />
                            </div>
                            <div class="form-group">
                                <input type="password" class="splash-input" name="password" placeholder="Password" id="loginPassword" autocomplete="new-password" />
                            </div>
                            <p class="text-center">Forgot password, you poopyhead? <a href="#" data-toggle="modal" data-target="#modalResetPass">Reset it</a></p>
                            <div class="splash-content__buttons">
                                <button type="submit" id="btnLogin" class="button button--white button--white-bg button--block">GET IN</button>
                            </div>
                        </form>
                        <div class="splash-content__register">
                            <p>Not registered yet?</p>
                            <ul>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#modalRegister">Sign up</a>
                                </li>
                                <li>
                                    <a href="#" id="sign-in-anon">Enter Anonymously</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                </div>
            </div>                                    
        </div>

        <div class="modal" id="modalRegister" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">                    
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <img src="img/logo.png" alt="WaveUX" class="splash-content__logo" />
                        <img src="img/login-logo.png" alt="W" class="splash-content__icon" />
                        <div id="frmRegisterAlert" class="alert"></div>
                        <form id="frmRegister" autocomplete="off">
                            <div class="form-group">
                                <input type="email" class="splash-input" name="registerEmail" placeholder="email" id="registerEmail" />
                            </div>
                            <div class="form-group">
                                <input type="text" class="splash-input" name="registerUsername" placeholder="your new username" id="registerUsername" />
                            </div>
                            <div class="form-group">
                                <input type="password" class="splash-input" name="registerPassword" placeholder="password" id="registerPassword" autocomplete="new-password" />
                            </div>
                            <div class="form-group text-center">
                                <div id="registerCaptcha" class="js-captcha"></div>
                            </div>
                            <div class="splash-content__buttons">                        
                                <button type="submit" id="btnRegisterUser" class="button button--white button--white-bg button--block">JOIN</button>
                            </div>
                        </form>
                        <div class="splash-content__register">
                            <p>Already register? <a href="#" data-toggle="modal" data-target="#modalLogin">Sign In</a></p>
                        </div>   
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modalAnonymous" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>WAVEUX is a social network, where anyone can post messages and media content. We offer several channels dedicated to variety of topics.</p>
                        <p>Your posts will only survive as long as the world deems them worthy. the post and thread is on the platform as long as it has a traction - other users like it, comment on it and engage.</p>
                        <p>Users do not need to register an account before participating on the platform.</p>
                        <p>As a condition of using this website, you agree to comply with the "Rules".</p>
                        <div class="text-center">
                            <button type="button" id="btnAnonModal" class="button button--blue">I AGREE</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="modalConduct" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>WAVEUX adheres to these esential points:</p>
                        <ol>
                            <li>
                                SAFETY: As a thread and/or post is out of time (without interactions) it gets completely deleted from the platform.
                            </li>
                            <li>
                                ANONYMITY: To protect individuals and their rights to speach, the site can be used anonymously.
                            </li>
                            <li>
                                RESPECT: We respect our users and their opinions.
                            </li>
                            <li>
                                OBJECTIVITY: We welcome relevant content and objective criticism.
                            </li>
                            <li>ACCESSIBILITY: We respond quickly and appropriately to direct questions, suggestions and criticism.</li>
                            <li>CREDIBILITY: We stand with our public statements and opinions in all conscience for transparency and credibility.</li>
                            <li>HONESTY: We deal with errors openly and do not conceal them.</li>
                            <li>LEGAL: We respect the rights of our users as well as the rights of uninvolved third parties.</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div id="menuScript">
            <div class="header">
                <div class="grid-container">
                    <div class="grid-row">
                        <div class="grid-col grid-col1">
                            <div class="header-boards">
                                <a href="#" class="js-show-boards">B</a>
                            </div>
                            <a href="/">
                                <img src="img/logo.png" alt="WaveUX" />
                            </a>    
                        </div>
                        <div class="grid-col grid-col2">
                            <div class="header-mid">
                                <div class="header-mid__tabs">
                                    <a href="/" class="showTabs showWave active"></a>
                                    <a href="?section=u-tab" class="showTabs showUserWave"></a>
                                </div>
                                <div class="header-mid__search">
                                    <div class="searchbox">
                                        <input type="search" class="searchTxt">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid-col grid-col3">
                            <ul class="header__menu">
                                <li id="createPencil">
                                    <a href="#" role="button" data-toggle="modal" data-target="#modalCreateThread">
                                        <img src="img/create.png" alt="Create Thread" />
                                    </a>
                                </li>
                                <li class="dropdown header-notifications">
                                    <a href="#" role="button" class="dropdown-toggle dropdown-noicon header__notification" data-toggle="dropdown">
                                        <img src="img/icons/notifications.svg" />
                                        <span class="badge badge-pill" id="notification-count"></span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right" id="notificationList">
                                        <h6 class="dropdown-header">No new notifications</h6>                                        
                                    </div>
                                </li>
                                <li class="dropdown">
                                    <a href="#" role="button" class="dropdown-toggle dropdown-noicon" data-toggle="dropdown">
                                        <img class="userAvatar js-photos">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right shadow-sm header__menu-profile">
                                        <a href="" class="dropdown-item btnMyProfile">View Profile</a>
                                        <a href="" class="dropdown-item btnProfileFollowers">Followers</a>
                                        <a href="" class="dropdown-item btnProfileFollowing">Following</a>
                                        <a href="" class="dropdown-item btnProfileBoards">Boards</a>
                                        <div class="dropdown-divider"></div>
                                        <a href="#" class="dropdown-item sign-out-button">Sign Out</a>
                                    </div>
                                </li>
                            </ul>    
                        </div>
                    </div>    
                </div>
            </div>            
        </div>

        <div id="anonMenuScript">
            <div class="header">
                <div class="grid-container">
                    <div class="grid-row">
                        <div class="grid-col grid-col1">
                            <div class="header-boards">
                                <a href="#">B</a>
                            </div>
                            <a href="/">
                                <img src="img/logo.png" alt="WaveUX" />
                            </a>    
                        </div>
                        <div class="grid-col grid-col2">
                            <div class="header-mid">
                                <div class="header-mid__tabs">
                                    <a href="/" class="showTabs showWave active"></a>
                                    <a href="#" data-toggle="tooltip" data-placement="bottom" title="You must login/register" class="showTabs showUserWave"></a>
                                </div>
                                <div class="header-mid__search">
                                    <div class="searchbox">
                                        <input type="search" class="searchTxt">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid-col grid-col3">
                            <ul class="header__menu">
                                <li id="createPencil">
                                    <a href="#" role="button" data-toggle="modal" data-target="#modalAnonCreateThread">
                                        <img src="img/create.png" alt="Create Thread" />
                                    </a>
                                </li>
                                <li class="header-anon">
                                    <a href="#" data-toggle="modal" data-target="#modalLogin" class="button button--hollow button--white button--sm mt-0">Login</a>
                                    <a href="#" data-toggle="modal" data-target="#modalRegister" class="button button--hollow button--white button--sm mt-0">Sign Up</a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" role="button" class="dropdown-toggle dropdown-noicon" data-toggle="dropdown">
                                        <img class="userAvatar js-photos">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right shadow-sm header__menu-profile">
                                        <a href="#" class="dropdown-item sign-out-button">Sign Out</a>
                                    </div>
                                </li>
                            </ul>    
                        </div>
                    </div>    
                </div>
            </div>                                 
        </div>
        <div id="anonfooterScript">
            <div class="footer">
                <ul>
                    <li><a href="?section=terms">Terms & Conditions</a></li>
                    <li><a href="?section=privacy">Privacy</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#modalConduct">Code of conduct</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#modalReportIssue">Report issue</a></li>
                </ul>
                &copy; Waveux <span class="footerYear"></span>
            </div>            
        </div>
        <div id="footerScript">
            <div class="footer">
                <ul>
                    <li><a href="?section=terms">Terms & Conditions</a></li>
                    <li><a href="?section=privacy">Privacy</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#modalConduct">Code of conduct</a></li>
                    <li><a href="#" data-toggle="modal" data-target="#modalReportIssue">Report issue</a></li>
                </ul>
                &copy; Waveux <span class="footerYear"></span>
            </div>            
        </div>

        <div id="cookieAlert">
            <p>To deliver and measure ads, and provide a safer experience, we use cookies. By tapping on the site, you agree to our use of cookies on and off WaveUX platform. More information can be found in our Privacy Policy.</p>
            <div class="text-right">
                <button type="button" id="btnAcceptCookie" class="button button--blue button--sm">Accept</button>
            </div>
        </div>

        <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://www.gstatic.com/firebasejs/5.4.1/firebase.js"></script>
        
        <script type="text/javascript">
            var captchaRegister;
            var captchaThread;
            var captchaPost;
            var captchaReport;
            
            var onloadCallback = function() {
                captchaRegister = grecaptcha.render('registerCaptcha', {
                    'sitekey' : '6LcNKo8UAAAAAK4E0fBF1aaFhuhFWcgICcU6YhOe'
                });
                captchaThread = grecaptcha.render('threadCreateCaptcha', {
                    'sitekey' : '6LcNKo8UAAAAAK4E0fBF1aaFhuhFWcgICcU6YhOe'
                });
                captchaPost = grecaptcha.render('postCreateCaptcha', {
                    'sitekey' : '6LcNKo8UAAAAAK4E0fBF1aaFhuhFWcgICcU6YhOe'
                });
                captchaReport = grecaptcha.render('reportCreateCaptcha', {
                    'sitekey' : '6LcNKo8UAAAAAK4E0fBF1aaFhuhFWcgICcU6YhOe'
                });
            };

            function resetRegisterCaptcha(){
                grecaptcha.reset(captchaRegister)
            }
            function resetThreadCaptcha(){
                grecaptcha.reset(captchaThread)
            }
            function resetPostCaptcha(){
                grecaptcha.reset(captchaPost)
            }
            function resetReportCaptcha(){
                grecaptcha.reset(captchaReport)
            }
        </script>
        <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
        <script type="text/javascript" src="concat.js?v=45"></script>
    </body>
</html>