npm - @natachah/vanilla-frontend - Versions diffs - 0.0.2 - Mend

@natachah/vanilla-frontend 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/.gitlab-ci.yml +40 -0
package/LICENSE.md +7 -0
package/README.md +11 -0
package/docs/index.html +36 -0
package/docs/main.js +32 -0
package/docs/pages/components/badge.html +154 -0
package/docs/pages/components/button.html +186 -0
package/docs/pages/components/card.html +184 -0
package/docs/pages/components/dialog.html +334 -0
package/docs/pages/components/disclosure.html +310 -0
package/docs/pages/components/dropdown.html +255 -0
package/docs/pages/components/form.html +331 -0
package/docs/pages/components/list.html +140 -0
package/docs/pages/components/loading.html +58 -0
package/docs/pages/components/media.html +130 -0
package/docs/pages/components/nav.html +119 -0
package/docs/pages/components/progress.html +47 -0
package/docs/pages/components/slider.html +311 -0
package/docs/pages/components/table.html +168 -0
package/docs/pages/javascript/autofill.html +170 -0
package/docs/pages/javascript/checkall.html +59 -0
package/docs/pages/javascript/comfort.html +134 -0
package/docs/pages/javascript/consent.html +112 -0
package/docs/pages/javascript/cookie.html +81 -0
package/docs/pages/javascript/form.html +199 -0
package/docs/pages/javascript/scroll.html +209 -0
package/docs/pages/javascript/sidebar.html +53 -0
package/docs/pages/javascript/sortable.html +148 -0
package/docs/pages/javascript/toggle.html +191 -0
package/docs/pages/javascript/tree.html +221 -0
package/docs/pages/layout/grid.html +201 -0
package/docs/pages/layout/reset.html +53 -0
package/docs/pages/layout/typography.html +324 -0
package/docs/pages/quick-start/conventions.html +112 -0
package/docs/pages/quick-start/customization.html +187 -0
package/docs/pages/quick-start/installation.html +95 -0
package/docs/pages/quick-start/mixins.html +228 -0
package/docs/pages/test.html +15 -0
package/docs/src/js/demo.js +98 -0
package/docs/src/js/doc-code.js +102 -0
package/docs/src/js/doc-demo.js +14 -0
package/docs/src/js/doc-layout.js +108 -0
package/docs/src/scss/demo.scss +77 -0
package/docs/src/scss/layout.scss +160 -0
package/docs/src/scss/style.scss +278 -0
package/docs/vite.config.mjs +23 -0
package/esbuild.mjs +25 -0
package/js/_autofill.js +131 -0
package/js/_check-all.js +77 -0
package/js/_comfort.js +174 -0
package/js/_consent.js +84 -0
package/js/_dialog.js +164 -0
package/js/_dropdown.js +101 -0
package/js/_scroll.js +184 -0
package/js/_sidebar.js +97 -0
package/js/_slider.js +249 -0
package/js/_sortable.js +143 -0
package/js/_tabpanel.js +88 -0
package/js/_toggle.js +123 -0
package/js/_tree.js +85 -0
package/js/tests/autofill.test.js +157 -0
package/js/tests/base-component.test.js +108 -0
package/js/tests/check-all.test.js +88 -0
package/js/tests/comfort.test.js +219 -0
package/js/tests/consent.test.js +84 -0
package/js/tests/cookie.test.js +102 -0
package/js/tests/dialog.test.js +189 -0
package/js/tests/dropdown.test.js +115 -0
package/js/tests/form-helper.test.js +155 -0
package/js/tests/scroll.test.js +203 -0
package/js/tests/sidebar.test.js +99 -0
package/js/tests/slider.test.js +307 -0
package/js/tests/sortable.test.js +124 -0
package/js/tests/tabpanel.test.js +114 -0
package/js/tests/toggle.test.js +190 -0
package/js/tests/tree.test.js +165 -0
package/js/utilities/_base-component.js +101 -0
package/js/utilities/_cookie.js +98 -0
package/js/utilities/_error.js +80 -0
package/js/utilities/_form-helper.js +101 -0
package/package.json +42 -0
package/scss/_badge.scss +37 -0
package/scss/_button.scss +34 -0
package/scss/_card.scss +122 -0
package/scss/_dialog.scss +116 -0
package/scss/_disclosure.scss +101 -0
package/scss/_dropdown.scss +68 -0
package/scss/_form.scss +197 -0
package/scss/_grid.scss +40 -0
package/scss/_group.scss +57 -0
package/scss/_list.scss +18 -0
package/scss/_loading.scss +49 -0
package/scss/_media.scss +37 -0
package/scss/_nav.scss +72 -0
package/scss/_progress.scss +40 -0
package/scss/_slider.scss +35 -0
package/scss/_table.scss +36 -0
package/scss/utilities/_mixin.scss +322 -0
package/scss/utilities/_reset.scss +145 -0
package/scss/utilities/_typography.scss +107 -0
package/scss/vanilla-frontend.scss +23 -0
package/scss/variables/_root.scss +70 -0
package/scss/variables/_setting.scss +63 -0
package/vitest.config.js +7 -0

package/docs/pages/layout/typography.html ADDED Viewed

@@ -0,0 +1,324 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Layout > Typography</title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h1>Typography</h1>
+        <p>All website have some typographic elements, here some basic styling.</p>
+        <p>To use it, import this file:</p>
+        <doc-code data-type="scss">
+            @import '@natachah/vanilla-frontend/scss/layout/_typography'
+        </doc-code>
+        <h2>Heading</h2>
+        <p>The headings use the default <code>&lt;h*&gt;</code> tags.</p>
+        <doc-demo>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+        </doc-demo>
+        <p>You can also group them inside a <code>&lt;hgroup&gt;</code> tag.</p>
+        <doc-demo>
+            <hgroup>
+                <h2>Frankenstein</h2>
+                <p>Or the modern Prometheus</p>
+            </hgroup>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <h1>Heading 1</h1>
+                <h2>Heading 2</h2>
+                <h3>Heading 3</h3>
+                <h4>Heading 4</h4>
+                <h5>Heading 5</h5>
+                <h6>Heading 6</h6>
+                <hgroup>
+                    <h2>Frankenstein</h2>
+                    <p>Or the modern Prometheus</p>
+                </hgroup>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --font-size-h*
+                --heading-font-weight
+                --heading-line-height
+                --heading-color
+            </doc-code>
+        </div>
+        <h2>Paragraph</h2>
+        <p>The paragraph use the default <code>&lt;p&gt;</code> tag.</p>
+        <p>As each website is uniq, there is no default <code>margin-block</code> for the paragraph.</p>
+        <doc-demo>
+            <p>Paragraph ! Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id rem placeat suscipit a consequatur ipsam nam quis eveniet vel nobis sunt praesentium explicabo alias obcaecati, perferendis nostrum ut veritatis mollitia.</p>
+            <p>Accusamus sit saepe laborum, veniam doloribus aliquid, commodi odio corrupti, repellendus pariatur modi. Saepe recusandae, natus fuga quidem ab iusto beatae molestias tempore rem esse aspernatur aut quasi deserunt atque.</p>
+        </doc-demo>
+        <h2>Anchor</h2>
+        <p>Use the default <code>&lt;a&gt;</code> tag to create links.</p>
+        <p>You can add the <code>aria-current</code> or <code>aria-selected</code> attribute to make the link with an active state.</p>
+        <p>By default if there is no <code>href</code> attribute, it will render as disabled state.</p>
+        <doc-demo>
+            <a href="#">Anchor</a>
+            <a href="#" aria-current="page">Active</a>
+            <a>Disabled</a>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <a href="#">Anchor</a>
+                <a href="#" aria-current="page">Active</a>
+                <a>Disabled</a>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --anchor-decoration
+                --anchor-color
+                --anchor-hover-color
+                --anchor-active-color
+                --anchor-disabled-opacity
+            </doc-code>
+        </div>
+        <h2>Inline</h2>
+        <doc-demo>
+            <div class="grid demo-inline">
+                <p><abbr title="Abbreviation">Abbr.</abbr></p>
+                <p><small>Small</small></p>
+                <p><q>An inline quote</q></p>
+                <p><b>Bold</b></p>
+                <p><strong>Strong</strong></p>
+                <p><em>Emphasis</em></p>
+                <p><i>Idiomatic</i></p>
+                <p><s>Strikethrough</s></p>
+                <p><u>Underline</u></p>
+                <p><span>Text <sub>Sub</sub></span></p>
+                <p><span>Text <sup>Sup</sup></span></p>
+                <p><cite>Citation</cite></p>
+                <p><mark>Highlight</mark></p>
+                <p><kbd>Ctrl + S</kbd></p>
+                <p><code>&lt;Code&gt;</code></p>
+                <p><ins>Inserted</ins></p>
+                <p><del>Deleted</del></p>
+            </div>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <p><abbr title="Abbreviation">Abbr.</abbr></p>
+                <p><small>Small</small></p>
+                <p><q>An inline quote</q></p>
+                <p><b>Bold</b></p>
+                <p><b>b</b></p>
+                <p><em>Emphasis</em></p>
+                <p><i>Idiomatic</i></p>
+                <p><s>Strikethrough</s></p>
+                <p><u>Underline</u></p>
+                <p><span>Text <sub>Sub</sub></span></p>
+                <p><span>Text <sup>Sup</sup></span></p>
+                <p><cite>Citation</cite></p>
+                <p><mark>Highlight</mark></p>
+                <p><kbd>Ctrl + S</kbd></p>
+                <p><code>&lt;Code&gt;</code></p>
+                <p><ins>Inserted</ins></p>
+                <p><del>Deleted</del></p>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --mark-padding-block
+                --mark-padding-inline
+                --mark-background
+                --kbd-padding-block
+                --kbd-padding-inline
+                --kbd-font-family
+                --kbd-color
+                --kbd-background
+                --kbd-border-radius
+                --code-padding-block
+                --code-padding-inline
+                --code-font-family
+                --code-color
+                --code-background
+                --code-border-radius
+            </doc-code>
+        </div>
+        <h2>Blockquote</h2>
+        <p>The quotes use the default <code>&lt;blockquote&gt;</code> tag.
+            Because the blockquote is usully design per website, their is no custom properties for them.</p>
+        <doc-demo>
+            <blockquote>
+                <p>
+                    “It's only after we've lost everything that we're free to do anything.”
+                </p>
+                <footer>
+                    - Chuck Palahniuk, <cite>Fight Club</cite>
+                </footer>
+            </blockquote>
+        </doc-demo>
+        <doc-code>
+            <blockquote>
+                It was a bright cold day in April, and the clocks were striking thirteen.
+            </blockquote>
+            <blockquote>
+                <p>
+                    “It's only after we've lost everything that we're free to do anything.”
+                </p>
+                <footer>
+                    - Chuck Palahniuk, <cite>Fight Club</cite>
+                </footer>
+            </blockquote>
+        </doc-code>
+        <h2>Code</h2>
+        <p>Use the <code>&lt;pre&gt;</code> tag with a <code>&lt;code&gt;</code> tag inside.
+            The design of a block of code is not the same as the inline element.</p>
+        <doc-demo>
+            <pre><code><!--
+            -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
+            -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <pre><code><!--
+                -->&lt;p&gt;Sample text here...&lt;/p&gt;<br><!--
+                -->&lt;p&gt;And another line of sample text here...&lt;/p&gt;</code></pre>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --pre-padding-block
+                --pre-padding-inline
+                --pre-font-family
+                --pre-color
+                --pre-background
+                --pre-border-radius
+            </doc-code>
+        </div>
+        <h2>List</h2>
+        <p>The lists use the default <code>&lt;ul&gt;</code> <code>&lt;ol&gt;</code> and <code>&lt;dl&gt;</code> tags.
+            Because the lists are usully design per website/situation, their is not too much custom properties for them.</p>
+        <doc-demo>
+            <ul>
+                <li>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dolores eligendi assumenda eaque sint nemo non laudantium quidem, voluptate ipsum sapiente accusantium mollitia vitae quia tenetur cupiditate voluptatibus maxime fugiat?</li>
+                <li>Velit ipsam blanditiis ducimus?</li>
+                <li>Porro impedit provident at!</li>
+            </ul>
+            <ol>
+                <li>Lorem, ipsum dolor.</li>
+                <li>Obcaecati, a impedit!</li>
+                <li>Quo, eligendi veritatis?</li>
+            </ol>
+            <dl>
+                <dt>Coffee</dt>
+                <dd>Black hot drink</dd>
+                <dt>Milk</dt>
+                <dd>White cold drink</dd>
+            </dl>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <ul>
+                    <li>Coffee</li>
+                    <li>Milk</li>
+                    <li>...</li>
+                </ul>
+                <ol>
+                    <li>Make coffee</li>
+                    <li>Add the milk</li>
+                    <li>Drink it !</li>
+                </ol>
+                <dl>
+                    <dt>Coffee</dt>
+                    <dd>Black hot drink</dd>
+                    <dt>Milk</dt>
+                    <dd>White cold drink</dd>
+                </dl>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --list-bullet
+                --list-offset
+            </doc-code>
+        </div>
+        <h2>Line</h2>
+        <p>Use the default <code>&lt;hr&gt;</code> tag render a horizontal line.</p>
+        <doc-demo>
+            <hr>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <hr>
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --hr-border-size
+                --hr-border-style
+                --hr-border-color
+            </doc-code>
+        </div>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/docs/pages/quick-start/conventions.html ADDED Viewed

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Quick start > Naming conventions</title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h1>Naming conventions</h1>
+        <p>Because all project should have some little rules...</p>
+        <h2>Classless</h2>
+        <p>The framework try to be classless as much as possible, this are the exeptions:</p>
+        <ul>
+            <li>.card</li>
+            <li>.dropdown</li>
+            <li>.grid</li>
+            <li>.flex-grid</li>
+            <li>.slider</li>
+            <li>.group</li>
+            <li>.list</li>
+        </ul>
+        <p>And for variations:</p>
+        <ul>
+            <li>.outline</li>
+            <li>.COLORNAME (e.g.: .primary)</li>
+        </ul>
+        <blockquote>
+            <p>For good practice avoid as much it's possible classes !</p>
+        </blockquote>
+        <h2>CSS and SCSS</h2>
+        <ul>
+            <li>The custom properties and variable must be <b>kebab-case</b></li>
+            <li>Private properties start with an <b>underscore</b></li>
+            <li>The classes must be <b>kebab-case</b></li>
+            <li>The IDs must be <b>camelCase</b></li>
+            <li>Use comment like in <a href="http://sassdoc.com/" target="_blank">SassDoc</a></li>
+        </ul>
+        <doc-code data-type="css">
+            :root {
+            --global-property: red;
+            }
+            .my-class {
+            background-color: var(--global-property)
+            }
+            #myId {
+            --_private-property: green;
+            background-color: var(--_private-property);
+            }
+        </doc-code>
+        <blockquote class="warning">
+            <p>Limit the number of <b>custom properties defined</b>, using too many of them can impact performance. Avoid unnecessary complexity.</p>
+        </blockquote>
+        <doc-code data-type="scss">
+            /// Description of the mixin
+            ///
+            /// @example something(red) // color: red
+            /// @link http://sassdoc.com/annotations/
+            /// @require {mixin} something
+            /// @param {name} $name - The description
+            /// @access public
+            ///
+            @mixin something($name){
+            color: $name
+            }
+        </doc-code>
+        <h2>Javascript</h2>
+        <ul>
+            <li>The variable and method name must be <b>camelCase</b></li>
+            <li>Use comment like in <a href="https://jsdoc.app/" target="_blank">JSDoc</a></li>
+            <li>Use single quote</li>
+            <li>Avoid semicolon</li>
+        </ul>
+        <doc-code data-type="js">
+            /**
+            * Explaination of the method
+            *
+            * @param {number} length - The length of the rectangle
+            * @param {number} width - The width of the rectangle
+            * @returns {number} - The area of the rectangle
+            */
+            function calculate(length, width) {
+            const myVariable = 'nothing'
+            return length * height
+            }
+        </doc-code>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/docs/pages/quick-start/customization.html ADDED Viewed

@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Quick start > Customization</title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h1>Customization</h1>
+        <p>The framework make you able to customize almost everything. But keep in mind that most of the work will be to create you own components per website !</p>
+        <h2>CSS custom properties</h2>
+        <p>There is a bunch of default CSS custom properties, and (almost) each component have their own properties if needed.</p>
+        <h3>Root</h3>
+        <p>In the <code>:root</code> set the default CSS properties that are global to all your website.</p>
+        <p>You also can split in multiple files, e.g.: <code>root.scss</code> and <code>color.scss</code></p>
+        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_root.scss</code>, or copy this code in your own file:</p>
+        <doc-code data-type="scss">
+            :root {
+                // Typography
+                --font-size: 16px;
+                --line-height: 1.5;
+                --font-family: Arial;
+                --font-weight: normal;
+                --font-size-h1: 2.25em; // 36px
+                --font-size-h2: 2.00em; // 32px
+                --font-size-h3: 1.75em; // 28px
+                --font-size-h4: 1.50em; // 24px
+                --font-size-h5: 1.25em; // 20px
+                --font-size-h6: 1.125em; // 18px
+                --font-size-large: 1.125em; // 18px
+                --font-size-small: .875em; // 14px
+                // Anchor
+                --decoration: none;
+                // Layouts
+                --padding-inline: .75em;
+                --padding-block: .5em;
+                // Border
+                --border-size: 1px;
+                --border-style: solid;
+                --border-radius: .25rem;
+                // Focus (outline)
+                --focus-size: 3px;
+                --focus-style: solid;
+                --focus-offset: 0;
+                --focus-opacity: 50%;
+                // Hover (color-mix)
+                --hover-color: black;
+                --hover-percent: 5%;
+                // Active (color-mix)
+                --active-color: black;
+                --active-percent: 10%;
+                // Disabled
+                --disabled-opacity: 50%;
+                // Colors
+                --color-body: white;
+                --color-font: black;
+                --color-primary: #B790E5;
+                --color-error: #DC3030;
+                --color-success: #008A00;
+                --color-warning: #FFA500;
+                // Contrasts
+                --color-warning-contrast: black;
+            }
+        </doc-code>
+        <h3>Themes</h3>
+        <p>You can define some CSS properties per theme with the attribute <code>[data-theme=MYTHEME]</code>:</p>
+        <doc-code data-type="scss">
+            // This is the light theme (or if there is none)
+            html[data-theme=light],
+            html:not([data-theme]) {
+                --color-body: white;
+                --color-font: black;
+            }
+            // This is for the dark theme
+            html[data-theme=dark] {
+                --color-body: black;
+                --color-font: white;
+            }
+            // This is for the dark theme
+            html[data-theme=my-custom-theme] {
+                --color-body: white;
+                --color-font: orange;
+            }
+        </doc-code>
+        <blockquote>
+            <p>In best practive it will be better to have a file per theme.</p>
+        </blockquote>
+        <h2>SCSS setting</h2>
+        <p>A few settings are set via the SCSS, they are for variations and for default style as:</p>
+        <ul>
+            <li><code>$color-variations</code> enable color variation for components</li>
+            <li><code>$outline-variations</code>> enable outline variation for components</li>
+            <li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
+        </ul>
+        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_setting.scss</code>, or copy this code in your own file:</p>
+        <doc-code data-type="scss">
+            /// Define the default list of colors available
+            ///
+            /// @access public
+            ///
+            $colors: (
+                primary,
+                success,
+                error,
+                warning
+            );
+            /// Define the components that have some color variations
+            ///
+            /// @example button: (error) // <button class="error"></button>
+            /// @access public
+            ///
+            $color-variations: (
+                badge: $colors,
+                button: $colors,
+                card: $colors,
+                disclosure: $colors,
+                list: $colors
+            );
+            /// Define the components that have an outline variation
+            ///
+            /// @example button // <button class="outline"></button>
+            /// @access public
+            ///
+            $outline-variations: (
+                badge,
+                button,
+                card,
+                disclosure,
+                list
+            );
+            /// Define the default properties for item
+            ///
+            /// @access public
+            ///
+            $default-item-properties: (
+                color: var(--color-font),
+                background: transparent,
+                border-size: var(--border-size),
+                border-style: var(--border-style),
+                border-color: transparent,
+                border-radius: var(--border-radius),
+                padding-inline: var(--padding-inline),
+                padding-block: var(--padding-block)
+            );
+        </doc-code>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>