[app.py]:

from flask import (Flask, render_template, request, 
					redirect, make_response, url_for)
import json
from options import DEFAULTS

app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html', saves=get_saved_data())

@app.route('/save', methods=['POST'])
def save():
	data = get_saved_data()
	data.update(dict(request.form.items()))
	response = make_response(redirect(url_for('builder')))
	response.set_cookie('character', json.dumps(data))
	return response

def get_saved_data():
	try:
		data = json.loads(request.cookies.get('character'))
	except TypeError:
		data = {}
	return data

@app.route('/builder')
def builder():
	return render_template('builder.html', saves=get_saved_data(), options=DEFAULTS)

app.run(debug=True, port=8000, host='0.0.0.0')

 

[builder.html]:

{% 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" id="{{saves.get('name', '')}}" value="{{saves.get('name', '')}}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                <input type="radio" name="colors" id="{{ color }}" value="{{ color }}" 
                    {% if saves.get('colors') == color %} 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>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </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) == choice %} checked {% endif %}>
                  <label for="{{category}}-{{choice}}_icon"><img src="/static/img/{{category}}-{{choice}}.svg">
                   </label>
                  {% endfor%}
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
    </div>
</form>
{% endblock %}