word-games-theme 1.6.1 → 1.6.3

data/_includes/repeat-letters.html

@@ -0,0 +1,323 @@
+{% 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>
+  <div class="container-fluid" id="containerWd">
+    <div class="serachSection">
+      <div class="position-relative serachBox">
+        <form action="" 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-commonPage">
+              <i class="ltr-cls-btn bi bi-x-circle-fill"></i>
+            </div>
+          </div>
+          <input
+            style="background-color: {{CustomColor.inputButtonBg}};"
+            type="submit"
+            class="serachBtn"
+            id="serach"
+            value=""
+          />
+
+          <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="tab_link_wrapper"
+            style="position: relative; display: none"
+          >
+            <div id="tab-scroll" class="tab-scroll flex-row">
+              <input
+                type="button"
+                name=""
+                id="prev"
+                class="prev tabsBg noOutline cursorPointer"
+                value=" "
+                style="display: none"
+              />
+              <div
+                id="tab-container"
+                class="search-container tab_container flex-row"
+              ></div>
+              <input
+                type="button"
+                name=""
+                id="next"
+                class="next tabsBg noOutline cursorPointer"
+                value=" "
+                style="display: none"
+              />
+            </div>
+          </div>
+          <div
+            class="wrapper_dropDown d-flex justify-content-end"
+            style="gap: 15px"
+          >
+            <div
+              class="Advancedbtn"
+              style="position: relative; margin-top: 10px"
+              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" style="display: none; margin-top: 10px">
+              <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 id="fillterWrapper" class="fillterWrapper hide">
+            <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
+                data-toggle="tooltip"
+                data-placement="top"
+                title="Filter for words that starts with these letters"
+                for="startsWith"
+                >Starts With</label
+              >
+              <br />
+              <input
+                type="text"
+                id="startsWith"
+                placeholder="Prefix"
+                value=""
+                name="prefix"
+              />
+            </div>
+            <div class="mustInclude">
+              <label
+                for="mustInclude"
+                data-toggle="tooltip"
+                data-placement="top"
+                title=" Words that contain letters in this order(ab)"
+                >Must Contains
+              </label>
+              <br />
+              <input
+                type="text"
+                id="mustInclude"
+                placeholder="Contains"
+                name="contains"
+              />
+            </div>
+            <div class="endsWith">
+              <label
+                for="endsWith"
+                data-toggle="tooltip"
+                data-placement="top"
+                title="Filter for words that ends with these letters"
+                >End With</label
+              >
+              <br />
+              <input
+                type="text"
+                id="endsWith"
+                placeholder="Suffix"
+                name="suffix"
+              />
+            </div>
+            <div class="exculdeWith">
+              <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"
+                id="exculdeWith"
+                placeholder="Exculde"
+                value=""
+                name="exculde"
+              />
+            </div>
+            <div class="inculdeWith">
+              <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"
+                id="inculdeWith"
+                placeholder="Include"
+                value=""
+                name="include"
+              />
+            </div>
+            <div class="wordLength">
+              <label
+                data-toggle="tooltip"
+                data-placement="top"
+                title="Filter for words with this length"
+                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>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container" id="containerWd">
+  <div class="row pad">
+    <div class="col-md-12">
+      <div class="filters d-flex justify-content-between align-items-center">
+        <div class="wordCount"></div>
+
+        <div class="filterSortedIcons">
+          <div
+            class="filter-icon"
+            onclick="myFunction()"
+            data-toggle="tooltip"
+            data-placement="top"
+            title="Filter"
+          >
+            <i class="bi bi-filter"></i>
+          </div>
+          <div
+            class="sortup-icon"
+            data-toggle="tooltip"
+            data-placement="top"
+            title="Sort"
+          >
+            <i class="bi bi-sort-up"></i>
+          </div>
+        </div>
+      </div>
+
+      {%- if page.noAdsRefresh -%}
+      <div class="main-loader"></div>
+      <div class="main" data-value="null"></div>
+      {%- else -%}
+      <div class="main"></div>
+      {%- endif -%}
+
+      <div class="errorMsg"></div>
+    </div>
+  </div>
+</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 advancedFilter = document.querySelector(".Advancedbtn");
+  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");
+  }
+
+  const close = document.querySelector(".times");
+  close.addEventListener("click", () => {
+    closeModal();
+  });
+</script>