Public
Edited
Jul 8, 2024
Importers
1 star
Insert cell
Insert cell
Insert cell
viewof loginView = html`<div class="flex flex-column brand-font bg-near-white" style="overflow-y: auto; height:600px;">
<header class="solid-shadow-y-1">
${pageHeader(["GESI Survey", "Admin", "Users"])}
</header>
<main class="pa3 space-y-3">
<div class="[ card ][ solid-shadow-1 mt4 ml-auto mr-auto mw6 space-y-3 ]">
${Inputs.text({label: "Secret Access Key"})}
${Inputs.button("Login")}
</div>
</main>
<div style="margin-top: auto">${pageFooter()}</div>
`
Insert cell
viewof usersPage = html`<div class="flex flex-column brand-font bg-near-white" style="overflow-y: auto; height:600px;">
<header class="solid-shadow-y-1">
${pageHeader(["GESI Survey", "Admin", "Users"])}
${nav([
{label: "Users", href:"#users", active: true},
{label: "Accounts", href:"#accounts"},
{label: "Surveys", href:"#surveys"},
])}
</header>
<main class="pa3 space-y-3">
<div class="toolbar flex justify-end">
<div class="button-group">
${Inputs.button(buttonLabel({label: "Add user", iconLeft: "plus"}))}
</div>
</div>

<div class="[ card ][ solid-shadow-1 ]">
<div class="c-table">${usersTable}</div>
</div>
</main>
<div style="margin-top: auto">${pageFooter()}</div>
`
Insert cell
usersTable = md`|User | Accounts |
|:--|:--|
|[James Moriarty](#)| BM-ABC, UO-MATH|
|[John Watson](#)| BE-SY|
|[Mycroft Holmes](#)| BE-SY|`
Insert cell
Insert cell
Insert cell
nav([
{label: "Users", href:"#", active: true},
{label: "Accounts", href:"#"},
{label: "Surveys", href:"#"},
])
Insert cell
Insert cell
Insert cell
stylesForNotebooks = html`<style>
a[href].nav {
color: var(--text-on-brand);
}

a[href].nav:hover {
text-decoration: none;
}`
Insert cell
Insert cell
html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style type="text/css" media="screen, print">
body {
font-family: var(--brand-font);
}
</style>
`
Insert cell
tachyonsExt({
colors: {
brand: mainColors[900], // or, provide and color hex code
accent: accentColors[900], // or, provide and color hex code
// The color of text which are usually displayed on top of the brand or accent colors.
"text-on-brand": "#ffffff",
},
fonts: {
"brand-font": `"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
}
})
Insert cell
styles
Insert cell
prototypeStyles = html`<style>
.c-table table {
margin: 0;
max-width: 100%;
}
</style>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more