access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
76 lines (73 loc) • 4.46 kB
HTML
<html class="text-size-0" lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="../images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
<link href="../images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="../images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="../images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="../images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="../images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="../images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="../images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="../images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="../images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
<link href="../images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="../images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="../images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<meta content="#112E51" name="msapplication-TileColor" />
<meta content="../images/ms-icon-144x144.png" name="msapplication-TileImage" />
<link href="../images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="../styles/site-default.css" rel="stylesheet" />
<title>Alert Banner Demo</title><noscript>
<style>
body {
visibility: visible ;
}
</style>
</noscript>
<script type="text/javascript">
function load() {
document.body.style.visibility = 'visible'
};
</script>
</head>
<body onload="load()" style="visibility: hidden;">
<main class="min-h-screen bg-color-white" id="demo-content">
<div class="p-1 mb-1 bg-color-grey-lightest"><input class="btn-primary mt-40" onclick="document.cookie = "site-alert-slug=; Path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;";" type="button" value="delete cookie" />
<p class="font-serif m-0 p-4">Refresh browser after deleting the cookie.</p>
</div>
<div aria-describedby="dialog-desc-site-alert-slug" aria-labelledby="dialog-title-site-alert-slug" class="c-alert-banner bg-status-info fixed bottom-0 w-screen px-8 js-alert hidden" data-cookie="site-alert-slug" role="dialog">
<div class="c-alert-banner-wrapper">
<div class="c-alert-banner__icon"><svg class="c-alert-banner__svg icon icon-info">
<use xlink:href="#icon-info"></use>
</svg></div>
<div class="c-alert-banner__body">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</div>
<div class="c-alert-banner__closing"><button id="alert-button" type="button"><svg class="icon-ui-x" role="img">
<title>close</title>
<use xlink:href="#icon-ui-x"></use>
</svg></button></div>
</div>
</div>
</main>
<footer class="py-4 text-center bg-color-blue-dark text-color-white links-invert">
<footer class="py-4 text-center color-dark-background">
<p>
<nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav>
</p>
<p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p>
<p class="m-0">
<nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav>
</p>
</footer>
</footer>
<script src="../scripts/access-nyc.js"></script>
<script type="text/javascript">
var access = new AccessNyc();
access.icons('../icons.svg');
access.alertBanner();
</script>
</body>
</html>