{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign dataToShow = site.data.[page.folderName][lang][file] %}
{% assign header = site.data.header[lang].data %}
{%- assign CustomColor = site.data.theme.colors -%}
<nav class="result_navbar_section navbar-expand-lg navbar-dark" style="background-color: #fff;">
<a class="nav_menu_bar" href="/" title="{{dataToShow.tooltip}}" style="position: absolute; top:5px">
<img src="{{ site.favicon | relative_url }}" alt="{{site.name}}" style="width:35px; height:35px;">
</a>
{%- if site.MonumetricID -%}
<span class="mobile_bars"><i style="top:0px" id="bars_style" class="bi bi-list bi-2x bars"></i></span>
<div id="open_list_bar">
{%- if header.megaMenu -%}
<div style="padding:2rem 0">
<a class="cat_bar_logo_link" href="/" title="{{dataToShow.tooltip}}">
<img class="cat_bar_img" width="30px" height="30px" src="{{ site.favicon | relative_url }}"
alt="{{site.name}}">
<span class="cat_title">{{site.siteName}}</span>
</a>
<div class="close_bar_btn">
<i class="bi bi-x"></i>
</div>
</div>
{%- for item in header.megaMenu.dropdown -%}
<div class="list-items-container">
<ul>
<li class="list_cat_heading">{{item.categoryName}}</li>
{%- for item in item.links -%}
<li class="list_cat_links">
<a class="list_cat_name dropdown-item" href="{{item.url}}">
{{item.name}}
</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endfor -%}
{%- endif -%}
</div>
{%- endif -%}
<div class="container" id="containerWd">
<section class="result_sticky_nav">
<div class="pageHeading text-center">
<h1 class="result_heading m-0 pb-0">
{{dataToShow.h1}}</h1>
</div>
<div class="serachSection2">
<div class="position-relative serachBox mt-4">
<form action="" id='form'>
<input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
placeholder="Enter up to 15 letters?" class="txtBox resultPageTxtBox" value='' name="search"
maxlength="15" value required autocomplete="off">
<div class="letter-close-button-commonPage">
<i class="ltr-cls-btn-commonPage bi bi-x-circle-fill"></i>
</div>
<input
style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
type="submit" class="serachBtn resultPageSearchBtn" id="serach" value>
<div class="dictonaryDropdown">
<select class="form-select select_dropDown2 resultPageDropdown2" name="dictionary"
aria-label="Default select example">
<option value="Dictionary">Dictionary</option>
<option value="twl06" id="twl06">TWL06 (US, Canada, Thailand)</option>
<option selected value="sowpods" id="sowpods">SOWPODS (Uk and Others)</option>
<option value="wwf" id="wwf">Enable (Words With Friends)</option>
</select>
</div>
{%- include filterWords/index.html -%}
<div class="wrapper_dropDown mt-3 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">
<div class="text-right times" style="cursor: pointer; margin-top:-15px;">
<img src="/assets/images/window-close.png" alt="window-close" height="15px"
width="15px">
</div>
<div class="startsWith same">
<label data-toggle="tooltip" data-placement="top"
title="Filter for words that starts with these letters" for="startsWith">Starts
With</label>
<input type="text" class="filter_val" id="startsWith" placeholder="Prefix" value=""
name="prefix">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Find words that start with these letters(AB-> Able)">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="mustInclude same">
<label for="mustInclude" data-toggle="tooltip" data-placement="top"
title=" Words that contain letters in this order(ab)">Must Contains </label>
<input type="text" class="filter_val" id="mustInclude" placeholder="Contains"
name="contains" value="">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Words that contain letters in this order(ab)">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="endsWith same">
<label for="endsWith" data-toggle="tooltip" data-placement="top"
title="Filter for words that ends with these letters">End With</label>
<input type="text" class="filter_val" id="endsWith" placeholder="Suffix" name="suffix"
value="">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Filter for words that ends with these letters">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="exculdeWith same">
<label data-toggle="tooltip" data-placement="top"
title="Only words that not contain the letters you enter here"
for="exculdeWith">Exculde</label>
<br>
<input type="text" class="filter_val" id="exculdeWith" placeholder="Exculde" value=""
name="exculde">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Only words that not contain the letters you enter here">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="inculdeWith same">
<label data-toggle="tooltip" data-placement="top"
title="Only words that contain the letters you enter here"
for="inculdeWith">Include</label>
<br>
<input type="text" class="filter_val" id="inculdeWith" placeholder="Include" value=""
name="include">
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Only words that contain the letters you enter here">
<i class="bi bi-question-circle"></i>
</div>
</div>
<div class="wordLength same">
<label data-toggle="tooltip" data-placement="top"
title="Filter for words with this length" for="wordLength">Word Length </label>
<input type="text" class="filter_val" id="wordLength" placeholder="Length" name="length"
value="">
<div style="margin-top: 1.2rem; gap:5px" class="d-flex w-100">
<input type="button" value="Clear" class="clearFilter btn-info text-white"
style="background-color:#808080;">
<input id="applyBtn" type="submit" value="Apply" class="btn-info text-white"
style="background: #808080">
</div>
<div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
title="Filter for words with this length">
<i class="bi bi-question-circle"></i>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</nav>
<div id="ezoic-pub-ad-placeholder-109"> </div>
<div id="ezoic-pub-ad-placeholder-110"> </div>
<div class="container" id="containerWd">
{%- if page.layout == "page2" -%}
<a id="home_page_search_result"
onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Home Page Search Result'});"></a>
{%- endif -%}
{% include section/wordGroup.html %}
</div>
<link rel="stylesheet" href="{{ '/assets/css/advancedFilter.css' | relative_url }}">
<script>
const clearFilter = document.querySelector('.clearFilter')
clearFilter.addEventListener('click', () => {
startsWith.value = ''
mustInclude.value = ''
endsWith.value = ''
exculdeWith.value = ''
inculdeWith.value = ''
wordLength.value = ''
})
const fillterWrapper = document.querySelector('.fillterWrapper')
function myFunction() {
fillterWrapper.classList.toggle('hide')
}
const close = document.querySelector('.times')
close.addEventListener('click', () => {
fillterWrapper.classList.add('hide')
})
</script>