{% extends "base.html" %} {% block title %}Request an estimation of your travel footprint{% endblock %} {% block hero %} <div class="jumbotron"> <h1>{{ content.estimate.hero.title | safe }}</h1> <p>{{ content.estimate.hero.description | markdown | safe }}</p> </div> {% endblock %} {% macro render_field(field) %} <dt> {{ field.label }} {% if not field.flags.optional %} <span class="required-asterisk" title="This field is required.">*</span> {% endif %} </dt> <dd> {{ field(title=field.description, class_="form-control", **kwargs) | safe }} {% if field.errors -%} <ul class=errors> {% for error in field.errors %} <li>{{ error }}</li> {% endfor %} </ul> {%- endif %} </dd> {% endmacro %} {% macro render_checkbox(field) %} {{ field(class="form-check-input") }} {{ field.label( class="form-check-label", title=field.description ) }} {% endmacro %} {% block body %} <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <form role="form" action="{{ url_for('.estimate') }}" method="post"> {{ form.hidden_tag() }} {# <div class="form-group">#} {# {{ render_field(form.email) }}#} {# <small class="form-text text-muted">We will never share your email with anyone.</small>#} {# </div>#} <div class="form-group row"> <div class="col-md-6"> {{ render_field(form.first_name) }} <small class="form-text text-muted">Fill these to say hello.</small> </div> <div class="col-md-6"> {{ render_field(form.last_name) }} <small class="form-text text-muted">We will never share your data with anyone.</small> </div> </div> <div class="form-group"> {{ render_field(form.institution) }} </div> <div class="form-group"> {{ render_field(form.origin_addresses) }} <small class="form-text text-muted"> Use <code>en_US</code> city and country names, without diacritics. The comma matters. <br> These usually are the addresses of your participants. </small> </div> <div class="form-group"> {{ render_field(form.destination_addresses) }} <small class="form-text text-muted"> Provide multiple destinations to compare them. <br> These usually are the possible locations for an event. </small> </div> {# <div class="form-check form-group">#} {# {{ render_checkbox(form.compute_optimal_destination) }}#} {# </div>#} <div class="form-check form-group"> {{ render_checkbox(form.use_atmosfair_rfi) }} <small class="form-text text-muted">Disabled. Work in Progress. RFI=1.9</small> </div> <div class="form-group"> {{ render_field(form.comment) }} </div> <button type="submit" class="btn btn-primary"> Submit a Request </button> </form> </div> <div class="col-md-2"></div> </div> {% endblock %} {% block js %} <script type="text/javascript"> // Multiline placeholders for textarea shim (eg: iPad) // https://github.com/EmilMoe/multiline-placeholder $(function() { var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Disable for chrome which already supports multiline if (! ((!!window.chrome) && !isOpera)) { var style = $('<style>textarea[data-placeholder].active { color: #666; }</style>') $('html > head').append(style); $('textarea[placeholder]').each(function(index) { var text = $(this).attr('placeholder'); var match = /\r|\n/.exec(text); if (! match) return; $(this).attr('placeholder', ''); $(this).attr('data-placeholder', text); $(this).addClass('active'); $(this).val(text); }); $('textarea[data-placeholder]').on('focus', function() { if ($(this).attr('data-placeholder') === $(this).val()) { $(this).attr('data-placeholder', $(this).val()); $(this).val(''); $(this).removeClass('active'); } }); $('textarea[data-placeholder]').on('blur', function() { if ($(this).val() === '') { var text = $(this).attr('data-placeholder'); $(this).val(text); $(this).addClass('active'); } }); } }); </script> {% endblock %}