{% extends "theme.html" %}

{% block body %}

<div class="container">

 <div class="col-lg-12">

 	<div class="row">

     {{ content|safe }}

    </div>

        {{lat}}

        {{o3offset}}

 <br>

 <br>

     <i>

         <h3>

            UV-Index für 50 DU Ozonverlust bei der Breite 50°N:

         </h3>

     </i>

 <br>

 <br>

     <form>

            <img src="/static/images/uvindex/{{figname}}" alt="{{ alt }}" border="6">

            <table border="black">

                <colgroup>

                    <col width="100">

                    <col width="100">

                    <col width="400">

                </colgroup>

                <tr>

                    <th align="center" bgcolor="#E0E0E0">UV-Index</th>

                    <th align="center" bgcolor="#E0E0E0">Bewertung</th>

                    <th align="center" bgcolor="#E0E0E0">Schutz</th>

                </tr>

                <tr>

                    <td align="center" bgcolor="#00B000">0 – 2 </td>

                    <td align="center" bgcolor="#00B000">niedrig</td>

                    <td style="padding-left:25px;">Kein Schutz erforderlich</td>

                </tr>

                <tr>

                    <td align="center" bgcolor="#FFFF00">3 – 5</td>

                    <td align="center" bgcolor="#FFFF00">mäßig</td>

                    <td style="padding-left:25px;">Schutz erforderlich: Hut, T-Shirt, Sonnenbrille, Sonnencreme</td>

                </tr>

                <tr>

                    <td align="center" bgcolor="#F87820">6 – 7</td>

                    <td align="center" bgcolor="#F87820">hoch</td>

                    <td style="padding-left:25px">Schutz erforderlich: Hut, T-Shirt, Sonnenbrille, Sonnencreme</td>

                </tr>

                <tr>

                    <td align="center" bgcolor="#FF0000">8 – 10</td>

                    <td align="center" bgcolor="#FF0000">sehr hoch</td>

                    <td style="padding-left:25px;">zusätzlicher Schutz erforderlich: Aufenthalt im Freien möglichst vermeiden</td>

                </tr>

                <tr>

                    <td align="center" bgcolor="#7F00FF">≥ 11</td>

                    <td align="center" bgcolor="#7F00FF">extrem</td>

                    <td style="padding-left:25px;">zusätzlicher Schutz erforderlich: Aufenthalt im Freien möglichst vermeiden</td>

                </tr>

            </table>

            <h6>Quelle: Schweizerisches Bundesamt für Gesundheit <a href="http://www.uv-index.ch/de/uvindex.html"> www.uv-index.ch/de/uvindex.html</a></h6>

     </form>

 <br>

 <br>

     <i>

         <h4>

             Andere Werte auswählen:

         </h4>

     </i>

    <form method="post" action="/ozoneloss/uvi_graph">

        <table border="0" width="100%">

            <tr>

                <th> <label for="Dobson-Unit" font-size="18">Bitte Ozonverlust auswählen:</label> </th>

                <th> <label for="Gradzahl">Bitte geographische Breite auswählen:</label> </th>

            </tr>

            <tr>

                <td>

                    <p>

                        <select name="Dobson-Unit" size="1" font-size="14"  border-color="gray">

                            <option>25</option>

                            <option selected>50</option>

                            <option>75</option>

                            <option>100</option>

                        </select>

                        Dobson-Einheiten

                    </p>

                </td>

                <td>

                    <p>

                         <select name="Gradzahl" size="1" font-size="14"  border-color="gray">

                            <option>80° N</option>

                            <option>70° N</option>

                            <option>60° N</option>

                            <option selected>50° N</option>

                            <option>50° S</option>

                            <option>60° S</option>

                            <option>70° S</option>

                            <option>80° S</option>

                         </select>

                    </p>

                </td>

            </tr>

        </table>

        <br>

        <input type="submit" value="Graph anzeigen" font-color="black" font-size="16" border-color="gray"/>

    </form>

<div class="row">

{{ content_explanation|safe }}

{{ modal_info|safe }}

</div>

</div>

</div>

{% endblock %}