_includes/section/home.html in word-games-theme-1.8.4 vs _includes/section/home.html in word-games-theme-1.8.5
- old
+ new
@@ -1,256 +1,172 @@
-{% assign file = page.fileName %} {% assign lang = page.lang %} {% assign
-dataToShow = site.data.[page.folderName][lang][file] %} {%- assign CustomColor =
-site.data.theme.colors -%}
+{% assign file = page.fileName %}
+{% assign lang = page.lang %}
+{% assign dataToShow = site.data.[page.folderName][lang][file] %}
+{%- assign CustomColor = site.data.theme.colors -%}
<div class="pageHeaderBg">
- <div class="container">
- <div class="pageHeading text-center" style="margin: 22px 0px">
- <h1 class="heading pb-0 mb-0">{{dataToShow.h1}}</h1>
- <br />
- {%- if dataToShow.h2 != "" -%}
- <h2>{{dataToShow.h2}}</h2>
- {%- endif -%}
+ <div class="container">
+ <div class="pageHeading text-center" style="margin:22px 0px">
+ <h1 class="heading pb-0 mb-0">
+ {{dataToShow.h1}}</h1>
+ <br>
+ {%- if dataToShow.h2 != "" -%}
+ <h2>
+ {{dataToShow.h2}}</h2>
+ {%- endif -%}
+ </div>
</div>
- </div>
- <div class="container-fluid" id="containerWd">
- <div class="serachSection">
- <div class="position-relative serachBox">
- <form action="/result" id="form" method="GET">
- <div style="position: relative">
- <input
- style="border-radius: {{CustomColor.inputFieldBorder}}"
- type="text"
- placeholder="Enter up to 15 letters?"
- class="txtBox"
- value=""
- name="search"
- maxlength="15"
- required
- autocomplete="off"
- autofocus
- />
- <!-- <span class="focus-border">
- <i></i>
- </span> -->
+ <div class="container-fluid" id="containerWd">
+ <div class="serachSection">
+ <div class="position-relative serachBox">
+ <form action="/result" id='form' method="GET">
+ <div style="position: relative;">
+ <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
+ placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
+ required autocomplete="off">
+ <span class="focus-border">
+ <i></i>
+ </span>
- <div class="letter-close-button">
- <i class="ltr-cls-btn bi bi-x-circle-fill"></i>
- </div>
- </div>
- <input
- type="submit"
- style="background-color: {{CustomColor.inputButtonBg}}"
- class="serachBtn"
- id="serach"
- value="submit"
- />
+ <div class="letter-close-button">
+ <i class="ltr-cls-btn bi bi-x-circle-fill"></i>
+ </div>
+ </div>
+ <input type="submit" style="background-color: {{CustomColor.inputButtonBg}};" class="serachBtn"
+ id="serach" value="submit">
- <div class="dictonaryDropdown">
- <select
- class="form-select select_dropDown2"
- name="dictionary"
- aria-label="Default select example"
- >
- <option value="Dictionary">Dictionary</option>
- <option value="twl06">TWL06 (US, Canada, Thailand)</option>
- <option selected value="sowpods">SOWPODS (Uk and Others)</option>
- <option value="wwf">Enable (Words With Friends)</option>
- </select>
- </div>
+ <div class="dictonaryDropdown">
+ <select class="form-select select_dropDown2" name="dictionary"
+ aria-label="Default select example">
+ <option value="Dictionary">Dictionary</option>
+ <option value="twl06">TWL06 (US, Canada, Thailand)</option>
+ <option selected value="sowpods">SOWPODS (Uk and Others)</option>
+ <option value="wwf">Enable (Words With Friends)</option>
+ </select>
+ </div>
- <br />
- <div
- class="wrapper_dropDown d-flex justify-content-end"
- style="gap: 15px"
- >
- <div class="advancedFilter" style="position: relative">
- <input
- type="button"
- value="Advanced Filter"
- class="filterButton"
- />
- <div class="angle-arrow2"></div>
- </div>
- </div>
+ <br>
+ <div class="wrapper_dropDown d-flex justify-content-end" style="gap:15px">
+ <div class="advancedFilter" style="position: relative;">
+ <input type="button" value="Advanced Filter" class="filterButton">
+ <div class="angle-arrow2"></div>
+ </div>
+ </div>
- <div id="fillterWrapper" class="fillterWrapper">
- <div class="text-right times" style="cursor: pointer">
- <img
- loading="lazy"
- src="/assets/images/window-close.png"
- alt="window-close-icon"
- height="12px"
- width="12px"
- />
+ <div id="fillterWrapper" class="fillterWrapper">
+ <div class="text-right times" style="cursor: pointer">
+ <img loading="lazy" src="/assets/images/window-close.png" alt="window-close-icon"
+ height="12px" width="12px">
+ </div>
+ <div class="startsWith">
+ <label for="startsWith">Starts
+ With</label>
+ <br>
+ <input type="text" 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">
+ <label for="mustInclude">Must Contains </label>
+ <br>
+ <input type="text" id="mustInclude" placeholder="Contains" name="contains">
+ <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">
+ <label for="endsWith">End With</label>
+ <br>
+ <input type="text" id="endsWith" placeholder="Suffix" name="suffix">
+ <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">
+ <label for="exculdeWith">Exculde</label>
+ <br>
+ <input type="text" 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">
+ <label for="inculdeWith">Include</label>
+ <br>
+ <input type="text" 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">
+ <label for="wordLength">Word Length </label>
+ <br>
+ <input type="text" id="wordLength" placeholder="Length" name="length">
+ <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: {{CustomColor.inputButtonBg}};">
+ <input type="submit" value="Apply" class="btn-info text-white"
+ style="background-color: {{CustomColor.inputButtonBg}};">
+ </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 class="startsWith">
- <label for="startsWith">Starts With</label>
- <br />
- <input
- type="text"
- 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">
- <label for="mustInclude">Must Contains </label>
- <br />
- <input
- type="text"
- id="mustInclude"
- placeholder="Contains"
- name="contains"
- />
- <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">
- <label for="endsWith">End With</label>
- <br />
- <input
- type="text"
- id="endsWith"
- placeholder="Suffix"
- name="suffix"
- />
- <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">
- <label for="exculdeWith">Exculde</label>
- <br />
- <input
- type="text"
- 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">
- <label for="inculdeWith">Include</label>
- <br />
- <input
- type="text"
- 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">
- <label for="wordLength">Word Length </label>
- <br />
- <input
- type="text"
- id="wordLength"
- placeholder="Length"
- name="length"
- />
- <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: {{CustomColor.inputButtonBg}};"
- />
- <input
- type="submit"
- value="Apply"
- class="btn-info text-white"
- style="background-color: {{CustomColor.inputButtonBg}};"
- />
- </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>
</div>
- </div>
</div>
+
+
<script>
- const clearFilter = document.querySelector(".clearFilter");
- let startsWith = document.getElementById("startsWith");
- let mustInclude = document.getElementById("mustInclude");
- let endsWith = document.getElementById("endsWith");
- let wordLength = document.getElementById("wordLength");
+ const clearFilter = document.querySelector('.clearFilter')
+ let startsWith = document.getElementById('startsWith')
+ let mustInclude = document.getElementById('mustInclude')
+ let endsWith = document.getElementById('endsWith')
+ let wordLength = document.getElementById('wordLength')
- clearFilter.addEventListener("click", () => {
- startsWith.value = "";
- mustInclude.value = "";
- endsWith.value = "";
- exculdeWith.value = "";
- inculdeWith.value = "";
- wordLength.value = "";
- });
- const advancedFilter = document.querySelector(".advancedFilter");
- const fillterWrapper = document.querySelector(".fillterWrapper");
- advancedFilter.addEventListener("click", () => {
- fillterWrapper.classList.toggle("actives");
- fillterWrapper.classList.remove("hide");
- });
+ clearFilter.addEventListener("click", (() => {
+ startsWith.value = ""
+ mustInclude.value = ""
+ endsWith.value = ""
+ exculdeWith.value = ""
+ inculdeWith.value = ''
+ wordLength.value = ""
+ }))
- // document.addEventListener('click', (event) => {
- // const withinBoundaries = event.composedPath().includes(advancedFilter)
- // if (!withinBoundaries) {
- // closeModal()
- // }
- // })
- function closeModal() {
- fillterWrapper.classList.remove("actives");
- fillterWrapper.classList.add("hide");
- }
+ const advancedFilter = document.querySelector('.advancedFilter')
+ const fillterWrapper = document.querySelector('.fillterWrapper')
+ advancedFilter.addEventListener('click', () => {
+ fillterWrapper.classList.toggle('actives')
+ fillterWrapper.classList.remove('hide')
+ })
- const close = document.querySelector(".times");
- close.addEventListener("click", () => {
- closeModal();
- });
-</script>
+
+
+ // document.addEventListener('click', (event) => {
+ // const withinBoundaries = event.composedPath().includes(advancedFilter)
+ // if (!withinBoundaries) {
+ // closeModal()
+ // }
+ // })
+ function closeModal() {
+ fillterWrapper.classList.remove('actives')
+ fillterWrapper.classList.add('hide')
+ }
+
+ const close = document.querySelector('.times')
+ close.addEventListener('click', () => {
+ closeModal()
+ })
+
+</script>
\ No newline at end of file