{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign dataToShow = site.data.[page.folderName][lang][file] %} {%- assign CustomColor = site.data.theme.colors -%} <!-- start commonPage as LandingPage --> <div class="container" id="containerWd"> <section class="sticky_nav"> <div class="pageHeading text-center pt-5"> <h1 class="heading m-0 pb-0"> {{dataToShow.h1}}</h1> {%- if dataToShow.h2 -%} <h2> {{dataToShow.h2}}</h2> {%- endif -%} </div> <div class="serachSection2"> <div class="position-relative serachBox"> <form action="{{page.url}}/result" id='form'> <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text" placeholder="Enter up to 15 letters?" class="txtBox" name="search" maxlength="15" value={{page.value}} required> <input style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};" type="submit" class="serachBtn" id="serach" value> <div class="dictonaryDropdown mt-4"> <select class="form-select select_dropDown2" name="dictonary" aria-label="Default select example"> <option selected value="Dictonary">Dictonary</option> <option value="twl06" id="twl06">TWL06 (US, Canada, Thailand)</option> <option value="sowpods" id="sowpods">SOWPODS (Uk and Others)</option> <option value="wwf" id="wwf">Enable (Words With Friends)</option> </select> </div> <div class="wrapper_dropDown mt-2 d-flex justify-content-end" style="gap:10px;"> <div class="Advancedbtn" style="position: relative;" onclick="myFunction()"> <span class="filter_count" style="display: none;"></span> <input type="button" value="Advanced Filter" class="filterButton"> <div class="angle-arrow"></div> </div> <div id="sort-select"> <select class="form-select sort-select" id="select_dropDown"> <option selected="true" hidden id="alpha" value="alpha">Sort by</option> <option id="alpha" value="alpha">A-Z</option> <option id="alpha" value="alpha">Z-A</option> <option id="alpha" value="alpha">Points</option> </select> </div> </div> <div class="fillterWrapper hide" style="top:115px"> <div class="text-right times" style="cursor: pointer; margin-top:-15px;"> <img src="../../assets/images/window-close.png" alt="" width="15px"> </div> <div class="startsWith same"> <label for="startsWith">Starts With</label> <input type="text" class="filter_val" id="startsWith" placeholder="Prefix" value="" name="prefix"> </div> <div class="mustInclude same"> <label for="mustInclude">Must Include </label> <input type="text" class="filter_val" id="mustInclude" placeholder="Contains" name="contains" value=""> </div> <div class="endsWith same"> <label for="endsWith">End With</label> <input type="text" class="filter_val" id="endsWith" placeholder="Suffix" name="suffix" value=""> </div> <div class="wordLength same"> <label for="wordLength">Word Length </label> <input type="text" class="filter_val" id="wordLength" placeholder="Length" name="length" value=""> </div> <div style="margin-top: 1.2rem;"> <input type="submit" value="Apply" class="btn-info w-100 text-white" style="background: #808080"> </div> </div> </form> </div> </div> </section> {% include section/xyzGroup.html %} </div> <!-- close commonPage as LandingPage --> <link rel="stylesheet" href="{{ '/assets/css/advancedFilter.css' | relative_url }}"> <script> const fillterWrapper = document.querySelector('.fillterWrapper') function myFunction() { fillterWrapper.classList.toggle('hide') } const close = document.querySelector('.times') close.addEventListener('click', () => { fillterWrapper.classList.add('hide') }) </script>