126 lines
4.5 KiB
HTML
126 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="author" content="Florine W. Dekker" />
|
|
<meta name="application-name" content="Test" />
|
|
<meta name="description" content="A test page" />
|
|
<meta name="theme-color" content="#0033cc" />
|
|
|
|
<meta name="fwd:nav:target" content="#nav" />
|
|
<meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
|
|
<meta name="fwd:footer:target" content="#footer" />
|
|
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
|
|
<meta name="fwd:footer:version" content="vTEST" />
|
|
<meta name="fwd:validation:load-forms" />
|
|
|
|
<title>Template test | FWDekker</title>
|
|
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<link rel="stylesheet" href="../../dist/template.css" />
|
|
</head>
|
|
<body>
|
|
<noscript class="fwd-js-notice">
|
|
<p>
|
|
This website does not function if JavaScript is disabled.
|
|
Please check the <a href="https://www.enable-javascript.com/">
|
|
instructions on how to enable JavaScript in your web browser</a>.
|
|
</p>
|
|
</noscript>
|
|
<nav id="nav"></nav>
|
|
<main class="container container-with-toc">
|
|
<aside>
|
|
<nav>
|
|
<b class="hidden-no-mobile">Table of contents</b>
|
|
<ul>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
</ul>
|
|
<hr class="hidden-no-mobile" />
|
|
</nav>
|
|
</aside>
|
|
<div role="document">
|
|
<section>
|
|
<header id="header">
|
|
<hgroup>
|
|
<h1><a href=".">Test</a></h1>
|
|
<h2>A test page</h2>
|
|
</hgroup>
|
|
</header>
|
|
|
|
<article id="global-status-card" class="status-card hidden">
|
|
<output></output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<h1>Test</h1>
|
|
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
|
|
<p>These are some more contents.</p>
|
|
<p>These are the page contents.</p>
|
|
|
|
|
|
<article>
|
|
<header>
|
|
<hgroup>
|
|
<h2>Log in</h2>
|
|
<h3>Already have an account? Welcome back!</h3>
|
|
</hgroup>
|
|
</header>
|
|
<form id="test-form" novalidate>
|
|
<article class="status-card hidden" data-status-for="test-form">
|
|
<output>Congrats!</output>
|
|
<a class="close" href="#" aria-label="Close"></a>
|
|
</article>
|
|
|
|
<fieldset>
|
|
<label for="test-email">Email</label>
|
|
<input id="test-email" type="email" name="email" autocomplete="on" />
|
|
<small id="test-email-hint" data-hint-for="test-email" data-hint="Test hint"></small>
|
|
|
|
<label for="test-password">Password</label>
|
|
<input id="test-password" type="password" name="password" />
|
|
<small id="test-password-hint" data-hint-for="test-password"></small>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<button id="login-button">Log in</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
<footer id="footer"></footer>
|
|
</div>
|
|
</main>
|
|
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<script src="../../dist/template.js"></script>
|
|
<script>
|
|
const {$} = window.fwdekker;
|
|
|
|
const storage = new window.fwdekker.storage.MemoryStorage();
|
|
storage.setNumber("test-key", 11);
|
|
console.log("Expected: 11. Actual: " + storage.getNumber("test-key", 0) + ".");
|
|
|
|
const validation = window.fwdekker.validation;
|
|
const testForm = $("#test-form");
|
|
testForm.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
|
|
validation.clearFormValidity(testForm);
|
|
|
|
const emailInput = $("#test-email");
|
|
if (emailInput.value.includes("@")) {
|
|
validation.showInputValid(emailInput);
|
|
validation.showMessageSuccess(testForm, "Yay!");
|
|
} else if (emailInput.value.trim() !== "") {
|
|
validation.showInputInvalid(emailInput, "Enter a valid email address.");
|
|
validation.showMessageError(testForm, "Oh no!");
|
|
}
|
|
});
|
|
|
|
validation.showMessageWarning($("#global-status-card"), ":D");
|
|
</script>
|
|
</body>
|
|
</html>
|