word-games-theme 1.8.2 → 1.8.3

data/_includes/section/home.html

@@ -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-&gt; 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 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-&gt; 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>
+            <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')
-
-
-    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 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 = "";
+  });
 
-    // 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()
-    })
+  // document.addEventListener('click', (event) => {
+  //     const withinBoundaries = event.composedPath().includes(advancedFilter)
+  //     if (!withinBoundaries) {
+  //         closeModal()
+  //     }
+  // })
+  function closeModal() {
+    fillterWrapper.classList.remove("actives");
+    fillterWrapper.classList.add("hide");
+  }
 
-</script>
+  const close = document.querySelector(".times");
+  close.addEventListener("click", () => {
+    closeModal();
+  });
+</script>

data/_layouts/default.html

@@ -1,71 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
-
-{%- include head/index.html -%}
-
-<body>
-    {%- include header/index.html -%}
-
-
-    {% if page.url == '/' %}
-
-    {% include section/home.html %}
-
-    {% else %}
-
-    {% include section/home2.html %}
-
-    {% endif %}
-
-    {% include section/feature.html %}
-
-    {%- if dataToShow.faqList -%}
-    {%- if dataToShow.faqList.first.Question !='' -%}
-    {% include section/news.html %}
-    {% endif %}
-    {% endif %}
-
-
-    {%- if page.letter -%}
-    {%- include WordPointTables/table.html -%}
-    {%- endif -%}
-
-    {% include adBlocker/adBlocker.html %}
-    {%- include Rating/rating.html -%}
-    {%- include share/socialshare.html -%}
-
-    {%- assign langen = "en" -%}
-    {%- if site.data[folder][langen][file].categories -%}
-    {% assign categories= site.data[folder][langen][file].categories %}
-    {%- else -%}
-    {% assign categories= page.categories %}
-    {%- endif -%}
-    {%- if site.data[folder][langen][file].tags -%}
-    {% assign tags= site.data[folder][langen][file].tags %}
-    {%- else -%}
-    {% assign tags= page.tags %}
-    {%- endif -%}
-    {%- if categories.size> 0 or tags.size>0-%}
-    {%- include section/related_categories_post.html -%}
-    {%- else -%}
-    {%- include section/recent_posts.html -%}
-    {% endif %}
-
-    {%- include footer/index.html -%}
-
-    {%- include script.html -%}
-
-    {%- if page.language -%}
+  {%- include head/index.html -%}
+
+  <body>
+    {%- include header/index.html -%} {% if page.url == '/' %} {% include
+    section/home.html %} {% else %} {% include section/home2.html %} {% endif %}
+    {% include section/feature.html %} {%- if dataToShow.faqList -%} {%- if
+    dataToShow.faqList.first.Question !='' -%} {% include section/news.html %}
+    {% endif %} {% endif %} {%- if page.letter -%} {%- include
+    WordPointTables/table.html -%} {%- endif -%} {% include
+    adBlocker/adBlocker.html %} {%- include Rating/rating.html -%} {%- include
+    share/socialshare.html -%} {%- assign langen = "en" -%} {%- if
+    site.data[folder][langen][file].categories -%} {% assign categories=
+    site.data[folder][langen][file].categories %} {%- else -%} {% assign
+    categories= page.categories %} {%- endif -%} {%- if
+    site.data[folder][langen][file].tags -%} {% assign tags=
+    site.data[folder][langen][file].tags %} {%- else -%} {% assign tags=
+    page.tags %} {%- endif -%} {%- if categories.size> 0 or tags.size>0-%} {%-
+    include section/related_categories_post.html -%} {%- else -%} {%- include
+    section/recent_posts.html -%} {% endif %} {%- include footer/index.html -%}
+    {%- include script.html -%} {%- if page.language -%}
     <script>
-        const select_dropDown2 = document.querySelector(".select_dropDown2")
-        select_dropDown2[0].style.display = "none"
-        select_dropDown2[1].style.display = "none"
-        select_dropDown2[2].style.display = "none"
-        select_dropDown2[3].style.display = "none"
+      const select_dropDown2 = document.querySelector(".select_dropDown2");
+      select_dropDown2[0].style.display = "none";
+      select_dropDown2[1].style.display = "none";
+      select_dropDown2[2].style.display = "none";
+      select_dropDown2[3].style.display = "none";
     </script>
     {%- endif -%}
-
-    <script defer src="/assets/js/default.js"></script>
-</body>
-
-</html>
+    <!-- <script defer src="/assets/js/default.js"></script> -->
+  </body>
+</html>
+
+<script>
+  let letterCloseButton = document.querySelector(".letter-close-button");
+  let txtBox = document.querySelector(".txtBox");
+  let focusBorder = document.querySelector(".focus-border");
+  txtBox.focus();
+
+  document.querySelector(".serachBtn").value = "";
+
+  function myFunction(x) {
+    if (x.matches) {
+      txtBox.addEventListener("click", () => {
+        document.documentElement.scrollTop = 200;
+        setTimeout(() => {
+          document.documentElement.scrollTop = 200;
+        }, 150);
+      });
+    } else {
+      console.log("false");
+    }
+  }
+  var x = window.matchMedia("(max-width: 768px)");
+  myFunction(x);
+  x.addListener(myFunction);
+
+  txtBox.addEventListener("input", (e) => {
+    if (e.target.value === "") {
+      letterCloseButton.classList.remove("close_ltr_icon");
+    } else {
+      letterCloseButton.classList.add("close_ltr_icon");
+    }
+
+    focusBorder.classList.remove("focus-border");
+    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "");
+    let rangeOfBlankTile = 3;
+    if (rangeOfBlankTile === "") {
+      rangeOfBlankTile = 3;
+    }
+    e.target.value = e.target.value.replace(/ /g, "?");
+    let data = [];
+    data = e.target.value.split("").filter((i) => i === "?");
+    if (data.length > rangeOfBlankTile) {
+      e.target.value = e.target.value.replace(/\?$/, "");
+    }
+  });
+
+  letterCloseButton.addEventListener("click", () => {
+    txtBox.value = "";
+    letterCloseButton.classList.remove("close_ltr_icon");
+  });
+</script>