diff --git a/hypha/static_src/src/sass/apply/abstracts/_variables.scss b/hypha/static_src/src/sass/apply/abstracts/_variables.scss
index 9ec6530477564aedbde2b4b0c48b8c79edfac8d0..e2c6a0502cc5ca3b413ead16789e69482f54ce49 100644
--- a/hypha/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/hypha/static_src/src/sass/apply/abstracts/_variables.scss
@@ -8,15 +8,16 @@
// Default
$color--white: #fff;
$color--black: #141414;
-$color--dark-grey: #404041;
$color--light-grey: #f7f7f7;
$color--light-mid-grey: #e8e8e8;
$color--mid-grey: #cfcfcf;
$color--mid-dark-grey: #919191;
+$color--dark-grey: #404041;
// Brand
$color--lightest-blue: #24aae1;
$color--light-blue: #0d7db0;
+$color--light-blue-90: transparentize($color--light-blue, .9);
$color--lighter-blue: #7ab8d4;
$color--dark-blue: #0c72a0;
$color--darkest-blue: #3d6bdb;
@@ -55,7 +56,6 @@ $color--white-25: rgba(255, 255, 255, .25);
$color--white-20: rgba(255, 255, 255, .2);
$color--white-10: rgba(255, 255, 255, .1);
-$color--light-blue-90: transparentize($color--light-blue, .9);
// Assignment
$color--default: $color--dark-grey;
diff --git a/hypha/static_src/src/sass/apply/styleguide.scss b/hypha/static_src/src/sass/apply/styleguide.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a7905997c428ac87f4887df91e232850bb42e91d
--- /dev/null
+++ b/hypha/static_src/src/sass/apply/styleguide.scss
@@ -0,0 +1,276 @@
+// Abstracts
+@import 'abstracts/functions';
+@import 'abstracts/mixins';
+@import 'abstracts/variables';
+
+// Base
+@import 'base/base';
+@import 'base/typography';
+
+// Components
+@import 'components/alert';
+@import 'components/all-submissions-table';
+@import 'components/all-reviews-table';
+@import 'components/admin-bar';
+@import 'components/actions-bar';
+@import 'components/card';
+@import 'components/cookieconsent';
+@import 'components/comment';
+@import 'components/button';
+@import 'components/editor';
+@import 'components/error-bar';
+@import 'components/feed';
+@import 'components/filters';
+@import 'components/grid';
+@import 'components/heading';
+@import 'components/icon';
+@import 'components/link';
+@import 'components/list';
+@import 'components/list-reveal';
+@import 'components/modal';
+@import 'components/rich-text';
+@import 'components/section';
+@import 'components/sidebar';
+@import 'components/tabs';
+@import 'components/status-bar';
+@import 'components/form';
+@import 'components/heading';
+@import 'components/icon';
+@import 'components/input';
+@import 'components/nav';
+@import 'components/pagination';
+@import 'components/profile';
+@import 'components/projects-table';
+@import 'components/related-sidebar';
+@import 'components/responsive-table';
+@import 'components/reviewer-dash-box';
+@import 'components/reviews-list';
+@import 'components/reviews-summary';
+@import 'components/reviews-sidebar';
+@import 'components/round-block';
+@import 'components/select2';
+@import 'components/simplified';
+@import 'components/status-block';
+@import 'components/submission-meta';
+@import 'components/revision';
+@import 'components/table';
+@import 'components/tooltip';
+@import 'components/traffic-light';
+@import 'components/wrapper';
+@import 'components/revisions';
+@import 'components/messages';
+@import 'components/stat-block';
+@import 'components/docs-block';
+@import 'components/funding-block';
+@import 'components/data-block';
+@import 'components/invoice-block';
+@import 'components/reminder-sidebar';
+@import 'components/two-factor';
+@import 'components/determination';
+
+// Layout
+@import 'layout/header';
+
+// Styleguide
+
+section {
+ margin: 4rem 0;
+}
+
+.styleguide {
+ color: $color--primary;
+ margin: 2rem 0;
+}
+
+.color--white {
+ color: $color--white;
+}
+
+.color--black {
+ color: $color--black;
+}
+
+.color--light-grey {
+ color: $color--light-grey;
+}
+
+.color--light-mid-grey {
+ color: $color--light-mid-grey;
+}
+
+.color--mid-grey {
+ color: $color--mid-grey;
+}
+
+.color--mid-dark-grey {
+ color: $color--mid-dark-grey;
+}
+
+.color--dark-grey {
+ color: $color--dark-grey;
+}
+
+.color--lightest-blue {
+ color: $color--lightest-blue;
+}
+
+.color--light-blue {
+ color: $color--light-blue;
+}
+
+.color--light-blue-90 {
+ color: $color--light-blue-90;
+}
+
+.color--lighter-blue {
+ color: $color--lighter-blue;
+}
+
+.color--dark-blue {
+ color: $color--dark-blue;
+}
+
+.color--darkest-blue {
+ color: $color--darkest-blue;
+}
+
+.color--mustard {
+ color: $color--mustard;
+}
+
+.color--purple {
+ color: $color--purple;
+}
+
+.color--pink {
+ color: $color--pink;
+}
+
+.color--light-pink {
+ color: $color--light-pink;
+}
+
+.color--light-green {
+ color: $color--light-green;
+}
+
+.color--tomato {
+ color: $color--tomato;
+}
+
+.color--mint {
+ color: $color--mint;
+}
+
+.color--grass {
+ color: $color--grass;
+}
+
+.color--ocean {
+ color: $color--ocean;
+}
+
+.color--sky-blue {
+ color: $color--sky-blue;
+}
+
+.color--marine {
+ color: $color--marine;
+}
+
+.color--mist {
+ color: $color--mist;
+}
+
+.color--green {
+ color: $color--green;
+}
+
+.color--pastel-red {
+ color: $color--pastel-red;
+}
+
+.color--pastel-green {
+ color: $color--pastel-green;
+}
+
+.color--fog {
+ color: $color--fog;
+}
+
+.color--twitter {
+ color: $color--twitter;
+}
+
+.color--linkedin {
+ color: $color--linkedin;
+}
+
+.color--facebook {
+ color: $color--facebook;
+}
+
+.color--black-60 {
+ color: $color--black-60;
+}
+
+.color--black-50 {
+ color: $color--black-50;
+}
+
+.color--black-40 {
+ color: $color--black-40;
+}
+
+.color--black-25 {
+ color: $color--black-25;
+}
+
+.color--black-20 {
+ color: $color--black-20;
+}
+
+.color--black-10 {
+ color: $color--black-10;
+}
+
+.color--white-50 {
+ color: $color--white-50;
+}
+
+.color--white-40 {
+ color: $color--white-40;
+}
+
+.color--white-25 {
+ color: $color--white-25;
+}
+
+.color--white-20 {
+ color: $color--white-20;
+}
+
+.color--white-10 {
+ color: $color--white-10;
+}
+
+.color--default {
+ color: $color--default;
+}
+
+.color--primary {
+ color: $color--primary;
+}
+
+.color--error {
+ color: $color--error;
+}
+
+.color--correct {
+ color: $color--correct;
+}
+
+.color--button-disabled {
+ color: $color--button-disabled;
+}
+
diff --git a/hypha/static_src/src/sass/public/abstracts/_variables.scss b/hypha/static_src/src/sass/public/abstracts/_variables.scss
index 724edffddb8848d4b9ecf4e574144fd98e23357f..931be93eca8d30775535742d046caea9b5616222 100644
--- a/hypha/static_src/src/sass/public/abstracts/_variables.scss
+++ b/hypha/static_src/src/sass/public/abstracts/_variables.scss
@@ -3,7 +3,6 @@
// Default
$color--white: #fff;
$color--black: #141414;
-$color--dark-grey: #404041;
$color--light-grey: #f7f7f7;
$color--light-mid-grey: #e8e8e8;
$color--mid-grey: #cfcfcf;
@@ -11,7 +10,10 @@ $color--mid-dark-grey: #919191;
$color--dark-grey: #404041;
// Brand
+$color--lightest-blue: #24aae1;
$color--light-blue: #0d7db0;
+$color--light-blue-90: transparentize($color--light-blue, .9);
+$color--lighter-blue: #7ab8d4;
$color--dark-blue: #0c72a0;
$color--darkest-blue: #3d6bdb;
$color--mustard: #e6ab32;
@@ -24,11 +26,12 @@ $color--mint: #40c2ad;
$color--grass: #7dc588;
$color--ocean: #1888b1;
$color--sky-blue: #e7f2f6;
-$color--marine: #177da8;
+$color--marine: #14729a;
$color--mist: #f3fafe;
$color--green: #7dc558;
$color--pastel-red: #f1a9a9;
$color--pastel-green: #afe6af;
+$color--fog: #eff2f5;
// Social
$color--twitter: #1da6f6;
@@ -36,6 +39,7 @@ $color--linkedin: #137ab8;
$color--facebook: #396ab5;
// Transparent
+$color--black-60: rgba(0, 0, 0, .6);
$color--black-50: rgba(0, 0, 0, .5);
$color--black-40: rgba(0, 0, 0, .4);
$color--black-25: rgba(0, 0, 0, .25);
@@ -47,13 +51,13 @@ $color--white-25: rgba(255, 255, 255, .25);
$color--white-20: rgba(255, 255, 255, .2);
$color--white-10: rgba(255, 255, 255, .1);
-$color--light-blue-90: transparentize($color--light-blue, .9);
// Assignment
$color--default: $color--dark-grey;
$color--primary: $color--light-blue;
$color--error: $color--tomato;
$color--correct: $color--mint;
+$color--button-disabled: $color--lighter-blue;
// Fonts
$font--primary: 'noto-sans';
@@ -86,6 +90,9 @@ $site-width: 1280px;
$wrapper--medium: 1020px;
$wrapper--small: 790px;
+// Text line length
+$max-text-line-length: 50em;
+
// Breakpoints
$breakpoints: (
'mob-portrait' '(min-width: 320px)',
@@ -93,13 +100,16 @@ $breakpoints: (
'small-tablet' '(min-width: 600px)',
'tablet-portrait' '(min-width: 768px)',
'tablet-landscape' '(min-width: 1024px)',
+ 'laptop-short' '(min-width: 1024px) and (max-height: 1280px)',
'desktop' '(min-width: 1320px)',
+ 'desktop-medium' '(min-width: 1920px)',
'desktop-wide' '(min-width: 2556px)'
);
// Transition
$transition: .25s ease-out;
$quick-transition: .15s ease;
+$medium-transition: .5s ease;
// Delays
$base-delay: 30ms;
@@ -107,5 +117,14 @@ $base-delay: 30ms;
// Spacing
$mobile-gutter: 20px;
+// Filters
+$filter-dropdown: '.select2 .select2-selection.select2-selection--single';
+
+// listing header/spacer height
+$listing-header-height: 75px;
+
+// Table breakpoint
+$table-breakpoint: 'tablet-landscape';
+
// Dropdown height
$dropdown-height: 45px;
diff --git a/hypha/static_src/src/sass/public/components/_button.scss b/hypha/static_src/src/sass/public/components/_button.scss
index 1a566866a45de8e9e113ace65b0b82f69c930511..a3b07c919e8f0dd9db68bbaf6436f6891d2b4fce 100644
--- a/hypha/static_src/src/sass/public/components/_button.scss
+++ b/hypha/static_src/src/sass/public/components/_button.scss
@@ -34,7 +34,7 @@
display: flex;
align-items: center;
- .header--narrow & {
+ .header & {
margin-right: 20px;
}
}
diff --git a/hypha/templates/styleguide.html b/hypha/templates/styleguide.html
index 078532e9014f091511f217d474d706fcca9d8612..35f3c3083a2bcd869c148089af7f90f20c05f953 100644
--- a/hypha/templates/styleguide.html
+++ b/hypha/templates/styleguide.html
@@ -1,41 +1,274 @@
-{% extends "base.html" %}
+{% load static wagtailuserbar wagtailcore_tags wagtailimages_tags util_tags %}<!doctype html>
+{% wagtail_site as current_site %}
+<html class="no-js" lang="en">
+ <head>
+ {# TODO fallbacks if page is not defined e.g. for 404 page #}
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>{% block title_prefix %}{% if current_site.site_name %}{{ current_site.site_name }} | {% endif %}{% endblock %}{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}{% endblock %}{% block title_suffix %}{{ TITLE_SUFFIX }}{% endblock %}</title>
+ <meta name="description" content="{% if page.search_description %}{{ page.search_description }}{% else %}{{ page.listing_summary }}{% endif %}" />
+
+ <!-- favicons -->
+ {% comment %}
+ Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
+ Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
+ {% endcomment %}
+ <link rel="icon" sizes="144x144" href="{% static 'images/favicons/android-chrome-144.png' %}">
+ <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16.png' %}">
+ <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32.png' %}">
+ <link rel="apple-touch-icon" sizes="76x76" href="{% static 'images/favicons/apple-icon-76.png' %}">
+ <link rel="apple-touch-icon" sizes="120x120" href="{% static 'images/favicons/apple-icon-120.png' %}">
+ <link rel="apple-touch-icon" sizes="152x152" href="{% static 'images/favicons/apple-icon-152.png' %}">
+ <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-icon-180.png' %}">
+ <link rel="manifest" href="{% static 'images/favicons/site.webmanifest.json' %}">
+ <meta name="msapplication-TileColor" content="#da532c">
+ <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150.png' %}">
+ <meta name="theme-color" content="#ffffff">
+ <link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
+ <link rel="stylesheet" href="{% static 'css/normalize.css' %}">
+ <link rel="stylesheet" href="{% static 'css/apply/styleguide.css' %}">
+ {% block extra_css %}{% endblock %}
+ <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
+
+ <script src="{% static 'js/jquery.min.js' %}"></script>
+ <script src="{% static 'js/main-top.js' %}"></script>
+ </head>
+
+ <body>
+
+ {% include "includes/sprites.html" %}
+
+ <header class="header">
+
+ <div class="header__inner wrapper wrapper--large">
+ <a href="{% slugurl 'home' %}" aria-label="Home link">
+ {% if settings.utils.SystemMessagesSettings.site_logo_default %}
+ {% image settings.utils.SystemMessagesSettings.site_logo_default width-215 as logo_default %}
+ <img class="header__logo header__logo--desktop" src="{{ logo_default.url }}">
+ {% if settings.utils.SystemMessagesSettings.site_logo_mobile %}
+ {% image settings.utils.SystemMessagesSettings.site_logo_mobile width-60 as logo_mobile %}
+ <img class="header__logo header__logo--mobile" src="{{ logo_mobile.url }}">
+ {% else %}
+ <img class="header__logo header__logo--mobile" src="{{ logo_default.url }}">
+ {% endif %}
+ {% else %}
+ <svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop--dark"></use></svg>
+ <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
+ {% endif %}
+ </a>
+
+ </div>
+ </header>
+
+ <main class="wrapper wrapper--large wrapper--main">
+ {% block content_wrapper %}
{% block content %}
- <h1>Style Guide</h1>
-
- <section id="palette">
- <h2>Colour palette</h2>
- <ul>
- <li class="color-name1">color-name1</li>
- <li class="color-name2">color-name2</li>
- <li class="color-name3">color-name3</li>
- <li class="color-name4">color-name4</li>
- <li class="color-name5">color-name5</li>
- <li class="color-name6">color-name6</li>
- </ul>
- </section>
-
- <section id="typography">
- <h2>Typography</h2>
- <h1>This is an h1</h1>
- <h2>This is an h2</h2>
- <h3>This is an h3</h3>
- <h4>This is an h4</h4>
- <h5>This is an h5</h5>
- <p>This is a paragraph</p>
- <ul>
- <li>These are</li>
- <li>items in an</li>
- <li>unordered list</li>
- </ul>
- <ol>
- <li>These are</li>
- <li>items in an</li>
- <li>ordered list</li>
- </ol>
- <code>This is an example of code</code>
- </section>
-
- {# Insert more style guide elements here #}
+<h1 class="styleguide">Style Guide</h1>
+
+<section id="palette">
+ <h2 class="styleguide">Colour palette default</h2>
+ <ul>
+ <li class="color--white">color--white</li>
+ <li class="color--black">color--black</li>
+ <li class="color--light-grey">color--light-grey</li>
+ <li class="color--light-mid-grey">color--light-mid-grey</li>
+ <li class="color--mid-grey">color--mid-grey</li>
+ <li class="color--mid-dark-grey">color--mid-dark-grey</li>
+ <li class="color--dark-grey">color--dark-grey</li>
+ </ul>
+
+ <h2 class="styleguide">Colour palette brand</h2>
+ <ul>
+ <li class="color--lightest-blue">color--lightest-blue</li>
+ <li class="color--light-blue">color--light-blue</li>
+ <li class="color--light-blue-90">color--light-blue-90</li>
+ <li class="color--lighter-blue">color--lighter-blue</li>
+ <li class="color--dark-blue">color--dark-blue</li>
+ <li class="color--darkest-blue">color--darkest-blue</li>
+ <li class="color--mustard">color--mustard</li>
+ <li class="color--purple">color--purple</li>
+ <li class="color--pink">color--pink</li>
+ <li class="color--light-pink">color--light-pink</li>
+ <li class="color--light-green">color--light-green</li>
+ <li class="color--tomato">color--tomato</li>
+ <li class="color--mint">color--mint</li>
+ <li class="color--grass">color--grass</li>
+ <li class="color--ocean">color--ocean</li>
+ <li class="color--sky-blue">color--sky-blue</li>
+ <li class="color--marine">color--marine</li>
+ <li class="color--mist">color--mist</li>
+ <li class="color--green">color--green</li>
+ <li class="color--pastel-red">color--pastel-red</li>
+ <li class="color--pastel-green">color--pastel-green</li>
+ <li class="color--fog">color--fog</li>
+ </ul>
+
+ <h2 class="styleguide">Colour palette social</h2>
+ <ul>
+ <li class="color--twitter">color--twitter</li>
+ <li class="color--linkedin">color--linkedin</li>
+ <li class="color--facebook">color--facebook</li>
+ </ul>
+
+ <h2 class="styleguide">Colour palette transparent</h2>
+ <ul>
+ <li class="color--black-60">color--black-60</li>
+ <li class="color--black-50">color--black-50</li>
+ <li class="color--black-40">color--black-40</li>
+ <li class="color--black-25">color--black-25</li>
+ <li class="color--black-20">color--black-20</li>
+ <li class="color--black-10">color--black-10</li>
+ <li class="color--white-50">color--white-50</li>
+ <li class="color--white-40">color--white-40</li>
+ <li class="color--white-25">color--white-25</li>
+ <li class="color--white-20">color--white-20</li>
+ <li class="color--white-10">color--white-10</li>
+ </ul>
+
+ <h2 class="styleguide">Colour palette assignment</h2>
+ <ul>
+ <li class="color--default">color--default (color--dark-grey)</li>
+ <li class="color--primary">color--primary (color--light-blue)</li>
+ <li class="color--error">color--error (color--tomato)</li>
+ <li class="color--correct">color--correct (color--mint)</li>
+ <li class="color--button-disabled">color--button-disabled (color--lighter-blue)</li>
+ </ul>
+
+</section>
+
+<section id="typography">
+ <h2 class="styleguide">Typography</h2>
+
+ <h1>This is an h1</h1>
+ <h2>This is an h2</h2>
+ <h3>This is an h3</h3>
+ <h4>This is an h4</h4>
+ <h5>This is an h5</h5>
+
+ <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <code>This is an example of code</code>
+
+ <h3 class="styleguide">Lists</h3>
+
+
+ <ul>
+ <li>These are</li>
+ <li>items in an</li>
+ <li>unordered list</li>
+ </ul>
+
+ <br>
+
+ <ol>
+ <li>These are</li>
+ <li>items in an</li>
+ <li>ordered list</li>
+ </ol>
+
+ <h2 class="styleguide">Typography in submissions</h2>
+
+ <article>
+ <div class="rich-text rich-text--answers">
+ <h1>This is an h1</h1>
+ <h2>This is an h2</h2>
+ <h3>This is an h3</h3>
+ <h4>This is an h4</h4>
+ <h5>This is an h5</h5>
+
+ <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <code>This is an example of code</code>
+
+ <h3 class="styleguide">Lists</h3>
+
+
+ <ul>
+ <li>These are</li>
+ <li>items in an</li>
+ <li>unordered list</li>
+ </ul>
+
+ <br>
+
+ <ol>
+ <li>These are</li>
+ <li>items in an</li>
+ <li>ordered list</li>
+ </ol>
+ </div>
+ </article>
+</section>
+
+<section id="button">
+ <h2 class="styleguide">Links and button</h2>
+
+ <button class="button button--primary">button--primary</button><br>
+
+ <button class="button button--primary button--half-width">button--half-width</button><br>
+
+ <button class="button button--primary button--full-width">button--full-width</button><br>
+
+ <button class="button button--primary button--arrow-pixels-white">
+ button--arrow-pixels-white
+ <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
+ </button><br>
+
+
+ <button class="button button--white">button--white</button><br>
+
+ <button class="button button--white button--half-width">button--half-width</button><br>
+
+ <button class="button button--white button--full-width">button--full-width</button><br><br>
+
+
+ <button class="link link--button">link--button</button><br>
+
+ <button class="link link--button link--button--narrow">link--button--narrow</button><br><br>
+
+</section>
+
+<section id="form">
+ <h2 class="styleguide">Form</h2>
+
+ <form class="form">
+ <div class="form__group">
+ <label for="text_input" class="form__question form__question--char_field text_input"><span>Text input</span></label>
+ <div class="form__item"><input id="text_input" type="text"></div>
+ </div>
+
+ <div class="form__group">
+ <label for="text_input" class="form__question form__question--char_field text_input" required=""><span>Text input required</span><span class="form__required">*</span></label>
+ <div class="form__item"><input id="text_input" type="text"></div>
+ </div>
+
+
+ <button class="button button--submit button--top-space button--primary" type="submit">Button submit</button>
+
+ <button class="button button--submit button--top-space button--white" type="submit">Button white submit</button>
+ </form>
+</section>
+
+<section id="sidebar">
+ <h2 class="styleguide">Sidebar</h2>
+
+ <div class="sidebar">
+ <div class="sidebar__inner">
+ <h5>Header</h5>
+ <p>Some text here.</p>
+ <button class="button button--primary button--full-width ">Button</a>
+ </div>
+ </div>
+</section>
+
+{# Insert more style guide elements here #}
{% endblock %}
+ {% endblock %}
+ </main>
+
+ <script src="{% static 'js/main.js' %}"></script>
+ {% block extra_js %}{% endblock %}
+ </body>
+</html>