{%- extends "base.html" -%}
{%- block title -%} Spinner {%- endblock -%}

{%- block head -%}
<style id="vars">
    :root {
        --dot: 40em;
        --size: 80em;
        --time: 2s;
        --amount: 6;
        --color: lightsalmon;
    }
</style>

<style>
    .centered,
    .spinner-block {
        flex-grow: 1;
    }

    .spinner-block {
        align-self: stretch;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .fog {
        position: absolute;
        top: -1em;
        left: -1em;
        bottom: -1em;
        right: -1em;
        z-index: -1;
        box-shadow: inset 0 0 1em 1em var(--bg), 0 0 0 300px var(--bg);
        opacity: 0.97;
    }

    .spinner {
        font-size: 1px;
        align-self: center;
        animation: rotation var(--time) linear infinite;
        z-index: -2;
    }

    .spinner *,
    .spinner *::after {
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
    }

    .spinner,
    .spinner>div {
        width: 0;
        height: 0;
    }

    .spinner>div {
        transform: rotate(calc(360deg / var(--amount) * var(--t)));
    }

    .spinner>div>div {
        position: relative;
        height: calc(var(--size) + var(--dot) / 2);
        transition-property: height;
    }

    .spinner>div>div::after {
        content: "";
        position: absolute;
        bottom: 0;
        transform: translate(-50%);

        width: var(--dot);
        height: var(--dot);
        color: var(--color);
        background: var(--color);
        border-radius: 50%;
        animation: color calc(var(--time) / 2) infinite;
        animation-delay: calc(var(--time) / var(--amount) * var(--t) * -0.5);

        transition-property: color, background, width, height;
    }

    @keyframes rotation {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes color {
        from { filter: hue-rotate(0deg); }
        to { filter: hue-rotate(360deg); }
    }

    .var_setting {
        min-width: 8rem;
        text-align: center;
    }
</style>
{%- endblock -%}



{%- macro var_setting(name, var_name, unit, min, max, step, value) -%}

<div class="stretched line-block">
    <div class="frame var_setting">
        {{ name }}: <label for="{{ var_name }}"> {{- value -}} </label>
    </div>

    <input
        id="{{ var_name }}" class="frame range" type="range"
        min="{{ min }}" max="{{ max }}" step="{{ step }}" value="{{ value }}"
    >
</div>

<script>
    document.getElementById("{{ var_name }}").addEventListener(
        "input",
        event => SetCssVar(event, "{{ var_name }}", "{{ unit }}"),
    );
</script>

{%- endmacro -%}


{%- block content -%}

<script>
    const VARS = document.getElementById("vars").sheet.cssRules[0].style;
    
    function SetCssVar(event, var_name, unit) {
        event.target.labels.forEach(i => i.innerHTML = event.target.value);
        VARS.setProperty("--" + var_name, event.target.value + unit);
    }
</script>

<div class="centered">
    <h1> CSS only spinner: </h1>

    <div class="spinner-block">
        <div class="fog"></div>
        <div class="spinner">
            {%- for i in range(10) -%}
                <div style="--t: {{ i }}"><div></div></div>
            {%- endfor -%}
        </div>
    </div>

    <hr>

    <h3> CSS --vars: </h3>
    {{ var_setting("Spinner size", "size", "em", 0, 200, 10, 80) }}
    {{ var_setting("Circle size", "dot", "em", 0, 100, 5, 40) }}
    {{ var_setting("Loop time", "time", "s", 0.5, 5, 0.5, 2) }}
    {{ var_setting("Circle amount", "amount", "", 1, 10, 1, 6) }}
</div>
{%- endblock -%}