Skip to content

Instantly share code, notes, and snippets.

@ken-okabe

ken-okabe/index.html

Created April 5, 2019 13:00
Show Gist options
  • Save ken-okabe/b0d733965fce1f250bab5f5104690e8c to your computer and use it in GitHub Desktop.
Save ken-okabe/b0d733965fce1f250bab5f5104690e8c to your computer and use it in GitHub Desktop.
Download ZIP
unlimitedjs + MDC login
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<style type="text/css">
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 32px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
background-color: rgba(0, 0, 0, 0.05);
}
.login-box {
background-color: white;
}
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
.main {
display: flex;
flex-direction: row;
justify-content: center;
}
.form-group {
display: flex;
justify-content: flex-end;
}
</style>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
</body>
</html>
Raw
script.js
import { T } from "https://unpkg.com/[email protected]/dist/esm/timeline-monad.js";
import { h, patch } from "https://unpkg.com/[email protected]/src/index.js";
const main = () => {
const topNodeTL = T(self => {
const f = () => (self.now =
h("div", null,
h("h2", { class: "mdc-typography--headline2" }, "Flawlessly with Material Design"),
h("div", { class: "main" },
h("div", { class: "mdc-layout-grid login-box mdc-elevation--z6" },
h("h1", null, "Login"),
h("div", { class: "mdc-text-field username" },
h("input", { type: "text", class: "mdc-text-field__input", id: "username-input", name: "username", required: true }),
h("label", { class: "mdc-floating-label", for: "username-input" }, "Username"),
h("div", { class: "mdc-line-ripple" })),
h("div", { class: "mdc-text-field password" },
h("input", { type: "password", class: "mdc-text-field__input", id: "password-input", name: "password", required: true, minlength: "8" }),
h("label", { class: "mdc-floating-label", for: "password-input" }, "Password"),
h("div", { class: "mdc-line-ripple" })),
h("div", { class: "mdc-form-field" },
h("div", { class: "mdc-checkbox" },
h("input", { type: "checkbox", class: "mdc-checkbox__native-control", id: "checkbox-1", "asp-for": "RememberLogin" }),
h("div", { class: "mdc-checkbox__background" },
h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
h("div", { class: "mdc-checkbox__mixedmark" }))),
h("label", { for: "checkbox-1", "asp-for": "RememberLogin" },
h("strong", null, "Remember My Login"))),
h("div", { class: "button-container" },
h("button", { type: "button", class: "mdc-button cancel" }, "Cancel"),
h("button", { class: "mdc-button mdc-button--raised next" }, "Next"))))));
setTimeout(f, 0);
});
const viewNodeTL = topNodeTL.sync(topNode => patch(viewNodeTL.now, topNode, document.body));
const mdcTL = viewNodeTL.sync(() => {
Array.from(document
.querySelectorAll('.mdc-text-field'))
.map(textField => window.mdc.textField
.MDCTextField.attachTo(textField));
Array.from(document
.querySelectorAll('.mdc-button'))
.map(button => window.mdc.ripple
.MDCRipple.attachTo(button));
});
};
main();
Raw
scripts
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
Raw
styles
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment