_includes/section/home.html in word-games-theme-1.8.2 vs _includes/section/home.html in word-games-theme-1.8.3
- old
+ new
@@ -1,172 +1,256 @@
-{% 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>
+ <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 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>
+ <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="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>
- <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 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>
+ <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>
-
-
<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 = "";
+ });
- 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");
+ });
- const advancedFilter = document.querySelector('.advancedFilter')
- const fillterWrapper = document.querySelector('.fillterWrapper')
- advancedFilter.addEventListener('click', () => {
- fillterWrapper.classList.toggle('actives')
- fillterWrapper.classList.remove('hide')
- })
+ // document.addEventListener('click', (event) => {
+ // const withinBoundaries = event.composedPath().includes(advancedFilter)
+ // if (!withinBoundaries) {
+ // closeModal()
+ // }
+ // })
+ function closeModal() {
+ fillterWrapper.classList.remove("actives");
+ fillterWrapper.classList.add("hide");
+ }
-
-
- // 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
+ const close = document.querySelector(".times");
+ close.addEventListener("click", () => {
+ closeModal();
+ });
+</script>