html 根据饼干中的内容渲染页面

Posted 2021-05-10

{% extends "layout.html" %} {% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                <input type="radio" id="{{ color }}" name="colors" value="{{ color }}" {% if saves.get( 'colors')==c olor %}checked{% endif %}>
                <label for="{{ color }}"></label> {% endfor %}
                <button class="btn">Update</button>
            </div>
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            {% if saves.get('footwear') %}
            <div class="footwear"><img src="/static/img/bear_items_footwear-{{ saves['footwear'] }}.svg"></div>
            {% endif %} {% if saves.get('pants') %}
            <div class="pants"><img src="/static/img/bear_items_pants-{{ saves['pants'] }}.svg"></div>
            {% endif %} {% if saves.get('shirts') %}
            <div class="shirt"><img src="/static/img/bear_items_shirts-{{ saves['shirts'] }}.svg"></div>
            {% endif %}
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            {% if saves.get('glasses') %}
            <div class="glasses"><img src="/static/img/bear_items_glasses-{{ saves['glasses'] }}.svg"></div>
            {% endif %}
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
            {% if saves.get('hat') %}
            <div class="hat"><img src="/static/img/bear_items_hat-{{ saves['hat'] }}.svg"></div>
            {% endif %}
        </div>
        <div class="items">
            {% for category, choices in options.items() %} {% if category != 'colors' %}
            <div class="grid-100 row">
                <div class="grid-20">
                    <p class="category-title">{{ category.title() }}</p>
                </div>
                <div class="grid-80">
                    <input type="radio" id="no_{{ category }}_icon" name="{{ category }}" value='' {% if not saves.get(category) %}checked{% endif %}>
                    <label for="no_{{ category }}_icon"><img src="/static/img/no-selection.svg"></label> {% for choice in choices %}
                    <input type="radio" id="{{ category }}-{{ choice }}_icon" name="{{ category }}" value="{{ choice }}" {% if saves.get(category)==c hoice %}checked{% endif %}>
                    <label for="{{ category }}-{{ choice }}_icon"><img src="/static/img/{{ category }}-{{ choice }}.svg"></label> {% endfor %}
                </div>
            </div>
            {% endif %} {% endfor %}
        </div>
    </div>
</form>

{% endblock %}