word-games-theme 3.3.5 → 3.3.7

data/_includes/wordgames-v2/infographics/infographics.html

@@ -0,0 +1,358 @@
+<style>
+    .slide img:hover {
+        transform: scale(1.02);
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
+        cursor: pointer;
+    }
+
+    .modal-arrow-btn {
+        position: absolute;
+        top: 50%;
+        width: 50px;
+        height: 50px;
+        background: rgba(0, 0, 0, 0.5);
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: 24px;
+        text-align: center;
+        line-height: 50px;
+        border-radius: 50%;
+        transform: translateY(-50%);
+    }
+
+    .modal-arrow-btn.prev {
+        left: 10px;
+    }
+
+    .modal-arrow-btn.next {
+        right: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .infographics-title {
+            width: auto !important;
+        }
+
+        .modal-arrow-btn {
+            top: 30%;
+            width: 40px;
+            height: 40px;
+            font-size: 20px;
+            line-height: 40px;
+        }
+
+        .modal-arrow-btn.prev {
+            left: 5px;
+        }
+
+        .modal-arrow-btn.next {
+            right: 5px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .modal-arrow-btn {
+            width: 30px;
+            height: 30px;
+            font-size: 16px;
+            line-height: 30px;
+        }
+
+        .modal-arrow-btn.prev {
+            left: 3px;
+        }
+
+        .modal-arrow-btn.next {
+            right: 3px;
+        }
+    }
+
+    .modal1 {
+        position: fixed;
+        z-index: 1000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(59, 58, 58, 0.9);
+        opacity: 0;
+        visibility: hidden;
+        transform: scale(0.8);
+        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
+    }
+
+    .modal1.show {
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1);
+        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
+    }
+
+    .modal1-content1 {
+        margin: auto;
+        display: block;
+        width: 80%;
+        max-width: 800px;
+        margin-top: 20px;
+        opacity: 0;
+        transform: translateY(-20px);
+        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
+    }
+
+    .modal1.show .modal1-content1 {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    .modal1-body img {
+        width: 100%;
+        height: auto;
+    }
+
+    .close1 {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 24px;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    .close1:hover {
+        color: #ccc;
+    }
+
+    #left {
+        left: 3%;
+        z-index: 99;
+    }
+
+    #right {
+        right: 3%;
+        z-index: 99;
+    }
+
+    .inforgraphics_section .wrapper i {
+        top: 50%;
+        height: 44px;
+        width: 44px;
+        color: #343f4f;
+        cursor: pointer;
+        font-size: 2.15rem;
+        position: absolute;
+        text-align: center;
+        line-height: 44px;
+        background: #eee;
+        border-radius: 50%;
+        transform: translateY(-50%);
+        transition: transform 0.1s linear;
+    }
+</style>
+
+<style>
+    /* Common styles for carousel arrow buttons */
+    .carousel-control {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 38px;
+        height: 38px;
+        border: none;
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(4px);
+        cursor: pointer;
+        z-index: 10;
+    }
+
+    /* Left button */
+    .carousel-control.left {
+        left: 10px;
+    }
+
+    /* Right button */
+    .carousel-control.right {
+        right: 10px;
+    }
+
+    /* Arrow icon inside button (pseudo-element) */
+    .carousel-control.left::before {
+        content: "\276E";
+        color: white;
+        font-size: 18px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .carousel-control.right::before {
+        content: "\276F";
+        color: white;
+        font-size: 18px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    /* Touch feel improve */
+    .carousel-control:active {
+        background: rgba(0, 0, 0, 0.6);
+    }
+
+    /* Hide on desktop */
+    @media (min-width: 769px) {
+
+        #leftBtn,
+        #rightBtn {
+            display: none !important;
+        }
+    }
+</style>
+<div class="container" id="infographicsContainer">
+    <h3 class="mb-5 infographics-title" style="width:445px"><b>Other useful information</b></h3>
+    <div class="inforgraphics_section">
+        <div class="wrapper">
+            <button id="leftBtn" class="carousel-control left" aria-label="Previous slide"></button>
+            <div class="carousel">
+                <div class="carousel-inner">
+                    {%- if dataToShow.infographics -%} {% for item in dataToShow.infographics %}
+                    <div class="slide">
+                        <img loading="lazy" src="{{ item.image }}" alt="{{item.alt}}" draggable="false"
+                            class="infographic-img" onclick="openModal1('{{ item.image }}')" />
+                        <p class="infographic-desc">{{ item.description | capitalize }}</p>
+                    </div>
+                    {% endfor %} {%- endif -%}
+                </div>
+            </div>
+            <button id="rightBtn" class="carousel-control right" aria-label="Next slide"></button>
+        </div>
+    </div>
+    <div id="imageModal1" class="modal1" onclick="closeModal1()">
+        <span class="close1" role="button" tabindex="0" aria-label="Close image" onclick="closeModal1()">&times;</span>
+        <button class="modal-arrow-btn prev" aria-label="Previous image">&#10094;</button>
+        <button class="modal-arrow-btn next" aria-label="Next image">&#10095;</button>
+        <div class="modal1-content1">
+            <div class="modal1-body">
+                <img id="modal1Image" src="" alt="Enlarged infographic" />
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const carousel = document.querySelector(".carousel-inner");
+    const leftBtn = document.getElementById("leftBtn");
+    const rightBtn = document.getElementById("rightBtn");
+
+    // Update arrow visibility
+    function updateArrows() {
+        const maxScroll = carousel.scrollWidth - carousel.clientWidth;
+
+        if (carousel.scrollLeft <= 0) {
+            leftBtn.style.display = "none";   // hide left
+        } else {
+            leftBtn.style.display = "block";  // show left
+        }
+
+        if (carousel.scrollLeft >= maxScroll - 2) {
+            rightBtn.style.display = "none";  // hide right
+        } else {
+            rightBtn.style.display = "block"; // show right
+        }
+    }
+
+    // Move slides
+    leftBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        let slideWidth = document.querySelector(".slide").offsetWidth;
+        carousel.scrollLeft -= slideWidth;
+        setTimeout(updateArrows, 200);
+    });
+
+    rightBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        let slideWidth = document.querySelector(".slide").offsetWidth;
+        carousel.scrollLeft += slideWidth;
+        setTimeout(updateArrows, 200);
+    });
+
+    // Update on scroll too
+    carousel.addEventListener("scroll", updateArrows);
+
+    // Initial update on load
+    updateArrows();
+
+    document.addEventListener("DOMContentLoaded", () => {
+        let modal_array_of_images = [];
+        let current_modal_img = 0;
+
+        // Function to update the modal image
+        function updateModalImage() {
+            const modal1Img = document.getElementById("modal1Image");
+            if (modal_array_of_images.length > 0) {
+                modal1Img.src = modal_array_of_images[current_modal_img].src;
+            }
+        }
+
+        // Function to prepare the array of images for the modal
+        function readyallimages() {
+            modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+        }
+
+        // Function to open the modal and set the current image
+        function openModal1(imageSrc) {
+            const modal1 = document.getElementById("imageModal1");
+            modal1.classList.add("show");
+            modal_array_of_images = Array.from(document.querySelectorAll('.infographic-img'));
+            current_modal_img = modal_array_of_images.findIndex(img => img.src === imageSrc);
+            updateModalImage();
+        }
+
+        // Function to close the modal
+        function closeModal1() {
+            const modal1 = document.getElementById("imageModal1");
+            modal1.classList.remove("show");
+        }
+
+        // Add click event listeners to each infographic image
+        document.querySelectorAll('.infographic-img').forEach(img => {
+            img.addEventListener('click', (event) => {
+                openModal1(event.target.src);
+            });
+        });
+
+        // Event listeners for the modal arrow buttons
+        const modal_btns = document.querySelectorAll('.modal-arrow-btn');
+        modal_btns.forEach(modal_btn => {
+            modal_btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (modal_btn.classList.contains('prev')) {
+                    current_modal_img = (current_modal_img > 0) ? current_modal_img - 1 : modal_array_of_images.length - 1;
+                } else {
+                    current_modal_img = (current_modal_img < modal_array_of_images.length - 1) ? current_modal_img + 1 : 0;
+                }
+                updateModalImage();
+            });
+        });
+
+        // Event listener for the close button
+        document.querySelectorAll(".close1").forEach(element => {
+            element.addEventListener("click", closeModal1);
+        });
+
+        // Event listener for closing the modal when clicking outside the image
+        document.getElementById("imageModal1").addEventListener("click", (event) => {
+            if (event.target === document.getElementById("imageModal1")) {
+                closeModal1();
+            }
+        });
+
+        // Initialize modal images on page load
+        readyallimages();
+    });
+
+</script>

data/_includes/wordgames-v2/search-box/dict-picker.html

@@ -0,0 +1,26 @@
+{%- comment -%} Dictionary chip + popover. Rendered server-side (no JS DOM moves) so it cannot cause layout shift. include.sfx keeps ids unique per form variant. {%- endcomment -%}
+<div class="wg-input-tools">
+    <span class="wg-char-count">0/15</span>
+    <div class="letter-close-button" aria-label="Clear letters" title="Clear">
+        <img loading="lazy" decoding="async" width="28" height="28" src="/assets/images/close-button.svg" alt="close-btn">
+    </div>
+    <div class="wg-dd">
+        <select id="wg-dictionary{{ include.sfx }}" class="form-select select_dropDown2 wg-dd__select" name="dictionary" aria-label="Choose dictionary" tabindex="-1">
+            <option value="Dictionary">All Dictionaries</option>
+            <option value="twl06" id="twl06{{ include.sfx }}">Scrabble US (TWL)</option>
+            <option selected value="sowpods" id="sowpods{{ include.sfx }}">Scrabble UK (SOWPODS)</option>
+            <option value="wwf" id="wwf{{ include.sfx }}">Words With Friends</option>
+        </select>
+        <button type="button" class="wg-dd__btn" aria-haspopup="listbox" aria-expanded="false" aria-label="Dictionary">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M6 6h10M6 10h7"/></svg>
+            <span class="wg-dd__label">UK · SOWPODS</span>
+            <svg class="wg-dd__chev" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
+        </button>
+        <ul class="wg-dd__menu" role="listbox" hidden>
+            <li role="option" tabindex="-1" data-value="Dictionary"><span class="wg-dd__check"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="wg-dd__txt"><b>All dictionaries</b><small>Search every word list at once</small></span></li>
+            <li role="option" tabindex="-1" data-value="twl06"><span class="wg-dd__check"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="wg-dd__txt"><b>Scrabble US (TWL)</b><small>North American Scrabble</small></span></li>
+            <li role="option" tabindex="-1" data-value="sowpods" class="is-on" aria-selected="true"><span class="wg-dd__check"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="wg-dd__txt"><b>Scrabble UK (SOWPODS)</b><small>UK &amp; international Scrabble</small></span></li>
+            <li role="option" tabindex="-1" data-value="wwf"><span class="wg-dd__check"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="wg-dd__txt"><b>Words With Friends</b><small>Words With Friends word list</small></span></li>
+        </ul>
+    </div>
+</div>

data/_includes/wordgames-v2/search-box/search-box.html

@@ -0,0 +1,87 @@
+{%- if site.noResultPage or page.noResultPage -%}
+
+<div class="serachSection py-3" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}"
+    data-ablank="{{page.ablank}}">
+    <div class="position-relative serachBox">
+        <form id='form' method="GET">
+            <div class="wg-tool-card">
+
+                <div class="container-fluid" id="containerWd">
+                    <div class="txt-box-container" style="position: relative;">
+                        <input type="text"
+                            placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter your letters…{% endif %}"
+                            class="textBoxes txtBox" name="search"
+                            maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" autocomplete="off"
+                            aria-label="Letters" value="{{page.value}}">
+                        {%- include wordgames-v2/search-box/dict-picker.html sfx="" -%}
+                    </div>
+                </div>
+
+                <div class="container" id="result-page-data">
+                    {%- include wordgames-v2/advanced-filter/advanced-filter.html -%}
+                </div>
+
+                <div class="search-btn-container">
+                    <button aria-label="Find Words" value="Search" type="submit" class="serachBtn" id="serach" style="background: linear-gradient(135deg, #b641da 0%, #8c20ad 100%) !important; color: #ffffff !important;">
+                        <span>Find Words</span>
+                        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                    </button>
+                </div>
+            </div>
+
+            {%- if page.wordle == 'solver' -%}
+            <div class="d-flex w-100 justify-content-center m-0 mt-5 text-center" style="font-size:16px">
+                <a onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Try Wordle Solver'});"
+                    class="trywordle" href="/wordle-solver">Try Wordle Solver</a>
+            </div>
+            {%- endif -%}
+        </form>
+    </div>
+</div>
+
+{%- else -%}
+<div class="serachSection py-3" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}"
+    data-ablank="{{page.ablank}}">
+    <div class="position-relative serachBox">
+        <form action="{% if page.url == '/' %}/result{% else %}{{page.url}}/result{% endif %}" id='form' method="GET">
+            <div class="wg-tool-card">
+
+                <div class="container-fluid" id="containerWd">
+                    <div class="txt-box-container" style="position: relative;">
+                        <input type="text"
+                            placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter your letters…{% endif %}"
+                            class="textBoxes txtBox" name="search"
+                            maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" required autocomplete="off"
+                            aria-label="Letters" value="{{page.value}}">
+                        {%- include wordgames/search-box/dict-picker.html sfx="-alt" -%}
+                    </div>
+                </div>
+
+                <div class="container" id="result-page-data">
+                    {%- include wordgames-v2/advanced-filter/advanced-filter.html -%}
+                </div>
+
+                <div class="search-btn-container">
+                    <button aria-label="Find Words" value="Search" type="submit" class="serachBtn" id="serach" style="background: linear-gradient(135deg, #b641da 0%, #8c20ad 100%) !important; color: #ffffff !important;">
+                        <span>Find Words</span>
+                        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                    </button>
+                </div>
+            </div>
+
+            {%- if page.wordle == 'solver' -%}
+            <div class="d-flex w-100 justify-content-center m-0 mt-5 text-center" style="font-size:16px">
+                <a onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Try Wordle Solver'});"
+                    class="trywordle" href="/wordle-solver">Try Wordle Solver</a>
+            </div>
+            {%- endif -%}
+        </form>
+    </div>
+</div>
+{%- endif -%}
+
+{%- if site.noResultPage or page.noResultPage -%}
+<div class="container" id="containerWd">
+    {% include wordgames/words-data/words-data.html %}
+</div>
+{%- endif -%}

data/_layouts/wordgames-home-v2.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{%- include wordgames-v2/head/head.html -%}
+
+{%- if site.noResultPage or page.noResultPage -%}
+{%- if page.letter -%}
+
+{%- if page.permalink == "/five-letter-words-with-these-letters" -%}
+<style>
+    .serachSection {
+        position: relative !important;
+        top: 0px !important;
+    }
+</style>
+{%- endif -%}
+
+<style>
+    .main-header {
+        margin: 0px !important;
+        /* background-image: radial-gradient(#e4e4f4 2px, transparent 2px); */
+        background-size: 25px 25px;
+        background-color: unset !important;
+    }
+</style>
+{%- else -%}
+<style>
+    .main-header {
+        margin: 0px !important;
+        background-color: unset !important;
+    }
+</style>
+{%- endif -%}
+{%- endif -%}
+
+
+
+<body class="wg-home">
+    <a class="wg-skip" href="#main-content">Skip to content</a>
+    {%- include home/header.html -%}
+
+    {%- if site.newFeatureBox -%}
+    <div class="wordgametheme-sidebar-left"></div>
+    <div class="wordgametheme-sidebar-right"></div>
+    {%- endif -%}
+
+
+
+    <main id="main-content">
+    <div class="main-header wg-hero">
+        {% include wordgames-v2/headings/headings.html %}
+        {% include wordgames-v2/search-box/search-box.html %}
+    </div>
+
+    {%- if page.homeHub -%}
+    <div class="wg-page">
+        {%- include home/letter-lists.html -%}
+        {%- include home/game-cards.html -%}
+        {%- include home/solvers.html -%}
+    </div>
+    {%- endif -%}
+
+    <div class="wg-seo" data-seo>
+        <div class="wg-seo__body" id="wg-seo-body">
+            {% include wordgames-v2/featurehighlights/featurehighlights.html %}
+            {%- include wordgames-v2/howto/howto.html -%}
+        </div>
+    </div>
+
+    {%- if dataToShow.faqList -%}
+    {%- if dataToShow.faqList.first.Question !='' -%}
+    {% include wordgames-v2/faqs/faqs.html %}
+    {% endif %}
+    {% endif %}
+
+    {% include wordgames/adblocker/adblocker.html %}
+
+
+    {%- if dataToShow.infographics.size > 0 -%}
+    {%- include wordgames-v2/infographics/infographics.html -%}
+    {%- endif -%}
+
+    {%- include wordgames/rating/rating.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 wordgames/recent-posts/recent-posts.html -%}
+    {% endif %}
+
+    {% include featurePageAuthors/featurePageAuthors.html %}
+
+
+    </main>
+
+    {%- include home/footer.html -%}
+
+    <button class="wg-top" id="wg-top" type="button" aria-label="Back to top" hidden>
+      <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M12 19V5M5 12l7-7 7 7"/></svg>
+    </button>
+
+    {%- include wordgames/scripts/scripts.html -%}
+
+    {%- if page.language -%}
+    <script>
+        const select_dropDown2 = document.querySelector(".select_dropDown2")
+        select_dropDown2select_dropDown2.style.display = "none"
+        select_dropDown2[1].style.display = "none"
+        select_dropDown2[2].style.display = "none"
+        select_dropDown2[3].style.display = "none"
+    </script>
+    {%- endif -%}
+
+
+    <script data-lang="{{page.lang}}" defer src="/assets/js/theme.js"></script>
+    <script defer src="/assets/js/home-ui.js"></script>
+    {%- if site.ad_preview -%}
+    {%- include home/ad-preview.html -%}
+    {%- endif -%}
+    
+    {%- if site.noResultPage -%}
+    <script data-url="{{site.url}}" data-blanktilerange="{{page.blanktilerange}}" defer
+        src="/assets/js/wordfinder-home.js"></script>
+    {%- else -%}
+    <script defer src="/assets/js/wordgames-home.js"></script>
+    {%- endif -%}
+
+</body>
+
+</html>