{% extends "common/base.html" %}
{% block title %}Retro Pixel {{ font_config.name }} - Demo{% endblock %}
{% block style %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        @font-face {
            font-family: retro-pixel-{{ font_config.outputs_name }};
            src: url("retro-pixel-{{ font_config.outputs_name }}.woff2?r={{ build_random_key }}");
        }
        .theme-light {
            color: #4b4b4b;
            background-color: white;
        }
        .theme-dark {
            color: white;
            background-color: #4b4b4b;
        }
        .theme-light .char-notdef {
            color: #f83737;
        }
        .theme-dark .char-notdef {
            color: #ffd339;
        }
        a {
            word-break: break-all;
        }
        a:link {
            color: cornflowerblue;
        }
        a:visited {
            color: cornflowerblue;
        }
        .btn-apply-theme {
            position: fixed;
            width: 48px;
            height: 48px;
            cursor: pointer;
        }
        #page {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 64px 192px;
            font-family: retro-pixel-{{ font_config.outputs_name }}, sans-serif;
        }
        @media screen and (max-width: 1006px) {
            #page {
                width: 750px;
                padding-left: 64px;
                padding-right: 64px;
            }
        }
        @media screen and (max-width: 750px) {
            #page {
                width: 100%;
                padding-left: 64px;
                padding-right: 64px;
            }
        }
        .title {
            margin-top: {{ font_config.font_size * 4 }}px;
            margin-bottom: {{ font_config.font_size * 2 }}px;
            font-size: {{ font_config.font_size * 3 }}px;
        }
        .content {
            margin-top: {{ font_config.font_size * 2 }}px;
            margin-bottom: {{ font_config.font_size * 2 }}px;
            font-size: {{ font_config.font_size * 2 }}px;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="btn-apply-theme theme-light" style="top: 0; left: 0;" onclick="onThemeChange('light')"></div>
    <div class="btn-apply-theme theme-dark" style="top: 0; right: 0;" onclick="onThemeChange('dark')"></div>
    <div id="page">
        {{ content_html }}
    </div>
    <script>
        let settings = {
            theme: 'light',
        }

        function applySettings() {
            localStorage.setItem('settings:demo-{{ font_config.output_name }}', JSON.stringify(settings))
            document.body.className = 'theme-' + settings.theme
        }

        function onThemeChange(theme) {
            settings.theme = theme
            applySettings()
        }

        let json = localStorage.getItem('settings:demo-{{ font_config.output_name }}')
        if (json) {
            Object.assign(settings, JSON.parse(json))
        }
        applySettings()
    </script>
{% endblock %}