body.html

<!-- Search / Filter Section -->
<div class="search">
    <div class="search-container">
        <input type="text" id="search">
        <label for="search">search</a>
    </div>

    <div class="sort-container">
        <button class="popular">{{ site.data.trans[page.lang].popular }}</button>
        <button data-dropdown="#alphabetical-dropdown" class="az-sort">A - Z</button>
        <button data-dropdown="#numerical-dropdown" class="09-sort">0 - 9</button>
        <button data-dropdown="#difficulty-dropdown" class="diff-sort">{{ site.data.trans[page.lang].difficulty }}</button>
        <button class="reset">{{ site.data.trans[page.lang].reset }}</button>
    </div>
</div>

<!-- Site List -->
<main>
    <section class="sites" id="sites">
        <p class="no-results">{{ site.data.trans[page.lang].noresults }} <a href='https://github.com/justgetmydata/jgmd'>{{ site.data.trans[page.lang].noresultshelp }}</a>.</p>

        {% assign sites = site.data.sites | sort_natural: 'name' %}
        {% for entry in sites %}
            <section class="site-block {{ entry.difficulty }}"{% if entry.meta == 'popular' %} data-popular{% endif %}>
                {% capture lang_url %}url_{{ page.short }}{% endcapture %}
                <a class="site-header" href="{% if entry[lang_url] %}{{ entry[lang_url] }}{% else %}{{entry.url}}{% endif %}">
                    {{ entry.name }}
                </a>

                <p class="site-difficulty">
                    {% if entry.difficulty == 'easy' %}
                        {{ site.data.trans[page.lang].difficulty_easy }}
                    {% elsif entry.difficulty == 'medium' %}
                        {{ site.data.trans[page.lang].difficulty_medium }}
                    {% elsif entry.difficulty == 'hard' %}
                        {{ site.data.trans[page.lang].difficulty_hard }}
                    {% elsif entry.difficulty == 'limited' %}
                        {{ site.data.trans[page.lang].difficulty_limited }}
                    {% elsif entry.difficulty == 'impossible' %}
                        {{ site.data.trans[page.lang].difficulty_impossible }}
                    {% endif %}
                </p>

                {% capture lang_notes %}notes_{{ page.lang }}{% endcapture %}
                {% if entry.notes or entry[lang_notes] %}
                    <div class="tooltip-content">
                        {% if entry[lang_notes] %}
                            {{ entry[lang_notes] | markdownify }}
                        {% else %}
                            {{ entry.notes | markdownify }}
                        {% endif %}
                        {% if entry.email %}
                            <br><a href="mailto:{{ entry.email }}?Subject={% if entry.email_subject %}{{ entry.email_subject | replace: ' ', '%20' }}{% else %}Data%20Access%20Request{% endif %}&body={% if entry.email_body %}{{ entry.email_body | replace: ' ', '%20' }}{% else %}Please%20send%20me%20a%20copy%20of%my%20personal%20data,%20my%20username%20is%20XXXXXX{% endif %}">{{ site.data.trans[page.lang].sendmail }} &raquo;</a>
                        {% endif %}
                    </div>
                    <a href="#" class="tooltip-toggle contains-info">
                        <span class="show-info">{{ site.data.trans[page.lang].showinfo }}</span>
                        <span class="hide-info">{{ site.data.trans[page.lang].hideinfo }}</span>
                    </a>
                {% else %}
                    <p class="tooltip-toggle">{{ site.data.trans[page.lang].noinfo }}</p>
                {% endif %}
            </section>
        {% endfor %}
    </section>
</main>

<!-- About Section -->
<section id="about" class="info-block about">
    <div class="info-container">
        <div class="info-block-half">
            <h2>{{ site.data.trans[page.lang].whatisthis }}</h2>
            <p>{{ site.data.trans[page.lang].whatisthis1|safe }} <a href='https://darkpatterns.org'>{{ site.data.trans[page.lang].whatisthis2|safe }}</a> {{ site.data.trans[page.lang].whatisthis3|safe }}</p>
            <p>{{ site.data.trans[page.lang].whatisthis4|safe }} <a href='https://github.com/justgetmydata/jgmd'>{{ site.data.trans[page.lang].pullrequest|safe }}</a>.</p>
        </div>
        <div class="info-block-half">
            <h2>{{ site.data.trans[page.lang].guide }}</h2>
            <p>{{ site.data.trans[page.lang].guideexplanations }}</p>
            <ul>
                <li class="easy"><span class="difficulty">{{ site.data.trans[page.lang].difficulty_easy|safe }}</span> - {{ site.data.trans[page.lang].guideeasy|safe }}</li>
                <li class="medium"><span class="difficulty">{{ site.data.trans[page.lang].difficulty_medium|safe }}</span> - {{ site.data.trans[page.lang].guidemedium|safe }}</li>
                <li class="hard"><span class="difficulty">{{ site.data.trans[page.lang].difficulty_hard|safe }}</span> - {{ site.data.trans[page.lang].guidehard|safe }}</li>
                <li class="limited"><span class="difficulty">{{ site.data.trans[page.lang].difficulty_limited|safe }}</span> - {{ site.data.trans[page.lang].guidelimited|safe }}</li>
                <li class="impossible"><span class="difficulty">{{ site.data.trans[page.lang].difficulty_impossible|safe }}</span> - {{ site.data.trans[page.lang].guideimpossible|safe }}</li>
            </ul>
        </div>
    </div>
</section>

<!-- <div class="banner-block">
    <div class="banner-content">
        <div class="banner-block-half" id="extension">
            <h2>{{ site.data.trans[page.lang].extension|safe }}</h2>
            <p>{{ site.data.trans[page.lang].extensionp1|safe }} <a target='_blank' href='https://mikerogers.io'>{{ site.data.trans[page.lang].mikerogers|safe }}</a> {{ site.data.trans[page.lang].extensionp2|safe }}</p>
            <p>{{ site.data.trans[page.lang].extensionp3|safe }}</p>
            <p>{{ site.data.trans[page.lang].extensionp4|safe }} <a target='_blank' href='https://chrome.google.com/webstore/detail/justdeleteme/hfpofkfbabpbbmchmiekfnlcgaedbgcf'>{{ site.data.trans[page.lang].extensionp5|safe }}</a> {{ site.data.trans[page.lang].extensionp6|safe }}.</p>
        </div>
        <div class="banner-block-half">
            <h2>{{ site.data.trans[page.lang].extensionguide|safe }}</h2>
            <ul>
                <li><span class="dot-wrapper"><span class="dot easy"></span></span> - {{ site.data.trans[page.lang].guideeasy|safe }}</li>
                <li><span class="dot-wrapper"><span class="dot medium"></span></span> -  {{ site.data.trans[page.lang].guidemedium|safe }}</li>
                <li><span class="dot-wrapper"><span class="dot hard"></span></span> - {{ site.data.trans[page.lang].guidehard|safe }}</li>
                <li><span class="dot-wrapper"><span class="dot limited"></span></span> - {{ site.data.trans[page.lang].guidelimited|safe }}</li>
                <li><span class="dot-wrapper"><span class="dot impossible"></span></span> - {{ site.data.trans[page.lang].guideimpossible|safe }}</li>
            </ul>
        </div>
    </div>
    <div class="banner-block-extension"></div>
</div> -->

<!-- Language dropdown -->
<div id="language-dropdown" class="dropdown dropdown-tip has-icons">
    <ul class="dropdown-menu">
        {% assign sorted_files = (site.data.trans | sort:0) %}
        {% for lang in sorted_files %}
            {% assign full_code = lang[0] %}
            {% assign x = full_code | split: "-" %}
            {% capture short_code %}{{x[0]}}{% endcapture %}
            {% if full_code == 'en-GB' %}
                {% assign url = '' %}
            {% else %}
                {% assign url = short_code %}
            {% endif %}
            <li class="{{ full_code }}"><a href="/{{ url }}">{{ site.data.trans[full_code].name }}</a></li>
        {% endfor %}
    </ul>
</div>

<!-- Alphabetical sorting -->
<div id="alphabetical-dropdown" class="dropdown dropdown-tip">
    <ul class="dropdown-menu ltr">
        <span class="alpha-sort">
            {% assign letters = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z' | split:',' %}
            {% for letter in letters %}
            <li><a href="">{{ letter }}</a></li>
            {% endfor %}
        </span>
    </ul>
</div>

<!-- Numerical sorting -->
<div id="numerical-dropdown" class="dropdown dropdown-tip">
    <ul class="dropdown-menu ltr">
        <span class="num-sort">
            {% assign digits = '0,1,2,3,4,5,6,7,8,9' | split:',' %}
            {% for digit in digits %}
            <li><a href="">{{ digit }}</a></li>
            {% endfor %}
        </span>
    </ul>
</div>

<!-- Difficulty sorting -->
<div id="difficulty-dropdown" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
        <span class="diff-sort">
            {% assign difficulties = 'easy,medium,hard,limited,impossible' | split:',' %}
            {% for difficulty in difficulties %}
                {% capture difficulty_value %}difficulty_{{ difficulty }}{% endcapture %}
                <li><a href="#">{{ site.data.trans[page.lang][difficulty_value] }}</a></li>
            {% endfor %}
        </span>
    </ul>
</div>