Skip to content

Commit

Permalink
Update index-stg.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@younglim
younglim authored May 8, 2024
1 parent ad7889e commit 0c703a5
Showing 1 changed file with 36 additions and 31 deletions.
67 changes: 36 additions & 31 deletions index-stg.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Purple A11y banner</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-B32ZBDS7Z0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-B32ZBDS7Z0');
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-B32ZBDS7Z0');
</script>
<style>
html, body {
Expand All @@ -18,21 +21,25 @@
.a11y_ads-container{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 24px;
padding: 16px;
height: 100vh;
height: 100%;
background-color: white;
border: 1px solid #B5C5CA;
border-radius: 4px;
}
.a11y_box{
flex-direction: column;
}
.a11y_ads-svg{
padding-left: 24px;
}
.a11y_ads-txt{
font-family: 'Open Sans', 'Helvetica', sans-serif;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
.a11y_ads-link-txt{
font-family: 'Open Sans', 'Helvetica', sans-serif;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
a {
Expand All @@ -50,25 +57,23 @@
</style>
</head>
<body>
<main>
<div class="a11y_ads-container">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.3817 16.5071C33.3817 25.0042 26.4984 31.8892 18.0001 31.8892C9.50187 31.8892 2.61743 25.0042 2.61743 16.5071C2.61743 8.01 9.50243 1.125 18.0001 1.125C26.4978 1.125 33.3817 8.01 33.3817 16.5071Z" fill="#FFDD67"/>
<path d="M27.0224 5.99852C25.1442 4.90783 22.8779 4.7087 20.8389 5.45795C20.5571 5.56652 20.1093 4.53376 20.4519 4.40326C22.8031 3.53926 25.4199 3.76708 27.5866 5.02708C27.9022 5.21608 27.2801 6.1577 27.0241 5.99852" fill="#917524"/>
<path d="M14.0231 7.88064C12.146 6.78995 9.87915 6.59083 7.83897 7.33952C7.55828 7.4492 7.1094 6.41645 7.45253 6.28539C9.80434 5.42139 12.4211 5.64977 14.5878 6.90977C14.9023 7.09764 14.2818 8.03477 14.0253 7.88064" fill="#917524"/>
<path d="M22.2778 21.2489H13.7211C13.2733 21.2489 13.2733 19.7104 13.7211 19.7104H22.2784C22.7261 19.7104 22.7261 21.2489 22.2778 21.2489Z" fill="#664E27"/>
<path d="M12.0622 16.0381C14.3431 16.0381 16.1921 14.1891 16.1921 11.9082C16.1921 9.62733 14.3431 7.77832 12.0622 7.77832C9.78138 7.77832 7.93237 9.62733 7.93237 11.9082C7.93237 14.1891 9.78138 16.0381 12.0622 16.0381Z" fill="white"/>
<path d="M13.189 12.2856C14.3294 12.2856 15.2539 11.3611 15.2539 10.2207C15.2539 9.08027 14.3294 8.15576 13.189 8.15576C12.0485 8.15576 11.124 9.08027 11.124 10.2207C11.124 11.3611 12.0485 12.2856 13.189 12.2856Z" fill="#664E27"/>
<path d="M23.9365 16.0381C26.2174 16.0381 28.0664 14.1891 28.0664 11.9082C28.0664 9.62733 26.2174 7.77832 23.9365 7.77832C21.6556 7.77832 19.8066 9.62733 19.8066 11.9082C19.8066 14.1891 21.6556 16.0381 23.9365 16.0381Z" fill="white"/>
<path d="M25.0633 12.286C26.204 12.286 27.1288 11.3613 27.1288 10.2205C27.1288 9.07978 26.204 8.15503 25.0633 8.15503C23.9226 8.15503 22.9978 9.07978 22.9978 10.2205C22.9978 11.3613 23.9226 12.286 25.0633 12.286Z" fill="#664E27"/>
<path d="M23.0338 22.9701C20.6387 23.9995 14.4624 25.831 13.1 24.8804C12.4886 24.4523 12.456 23.6558 12.3964 22.2906C12.3367 20.9434 10.7921 19.7217 9.81842 19.7684C8.65235 19.8235 8.13879 20.7601 8.74517 21.8778C10.0777 24.3286 8.53423 25.4592 8.78792 27.4099C8.93417 28.5406 8.89985 30.457 11.0182 32.5501C13.4134 34.9171 16.8092 34.3619 17.9696 34.1194C19.3387 33.8343 19.9085 33.6829 20.1251 33.0096C20.3647 32.2649 20.1735 32.1248 20.2787 31.852C20.5093 31.2563 20.6848 31.2946 20.7281 30.6589C20.7754 29.9671 20.2348 29.6763 20.2961 29.3331C20.421 28.6182 21.0335 28.6103 20.1589 27.0983C22.1265 26.4481 23.3921 25.9098 24.4687 25.0351C26.4195 23.4533 24.3045 22.4228 23.0338 22.9701Z" fill="white"/>
<path d="M15.8061 34.8751C13.7086 34.8751 11.912 34.1945 10.6098 32.9075C8.59208 30.914 8.40027 29.0757 8.27427 27.8596C8.26021 27.7223 8.24615 27.593 8.23096 27.4726C8.12127 26.6277 8.30521 25.942 8.48183 25.2777C8.74452 24.2967 8.97065 23.4496 8.24446 22.1125C7.84958 21.3852 7.82427 20.6478 8.17471 20.0886C8.48915 19.588 9.07808 19.282 9.79133 19.2488C9.80146 19.2483 9.86558 19.2466 9.87458 19.2466C11.1756 19.2466 12.8879 20.6703 12.9593 22.2695C13.0167 23.5711 13.0606 24.1994 13.4397 24.4643C13.5083 24.5121 13.739 24.6246 14.3875 24.6246C16.6943 24.6246 21.0228 23.2606 22.798 22.4973C23.0961 22.3685 23.441 22.301 23.7931 22.301C24.697 22.301 25.4772 22.724 25.7331 23.3545C25.8867 23.7336 25.9756 24.5071 24.841 25.4279C23.7863 26.284 22.5854 26.8235 20.9378 27.391C21.3248 28.2359 21.1983 28.6364 20.98 29.078C20.9277 29.1843 20.885 29.2715 20.8608 29.3783C20.8782 29.4149 20.9176 29.4779 20.9468 29.5257C21.0993 29.7715 21.3282 30.1428 21.2905 30.6923C21.2579 31.1688 21.1572 31.3724 21.0065 31.6295C20.9451 31.7352 20.881 31.8432 20.809 32.0283C20.8051 32.044 20.8085 32.0958 20.8107 32.134C20.8208 32.3286 20.8371 32.6228 20.6645 33.1589C20.3427 34.1596 19.3988 34.3565 18.0938 34.6276C17.2968 34.7941 16.5486 34.8751 15.8061 34.8751ZM9.87458 20.2889C9.61415 20.3007 9.30196 20.3654 9.14727 20.6123C8.99146 20.8604 9.02858 21.2361 9.24965 21.6434C10.1626 23.3247 9.84983 24.4947 9.57365 25.5275C9.4139 26.1265 9.26258 26.693 9.34752 27.3477C9.36383 27.476 9.37846 27.6126 9.39365 27.7589C9.51233 28.8985 9.6749 30.46 11.4305 32.1937C12.5301 33.2815 14.0022 33.8322 15.8061 33.8328C16.4643 33.8328 17.132 33.7602 17.8475 33.61C19.2138 33.3254 19.4736 33.214 19.5878 32.8602C19.7048 32.4963 19.6953 32.3309 19.688 32.1852C19.6801 32.0502 19.6716 31.882 19.751 31.6761C19.8522 31.4151 19.9484 31.2515 20.0187 31.1311C20.1138 30.9696 20.1492 30.9083 20.1689 30.6254C20.1846 30.3886 20.0907 30.2367 19.9715 30.0438C19.8432 29.8368 19.684 29.5791 19.7436 29.2473C19.7892 28.9846 19.8826 28.7956 19.958 28.6437C20.0856 28.3861 20.1695 28.2156 19.6649 27.3443C19.5878 27.211 19.5771 27.0524 19.6362 26.9106C19.6947 26.7695 19.8173 26.6581 19.972 26.6075C21.7973 26.0039 23.0585 25.4886 24.1002 24.6438C24.5496 24.2787 24.7673 23.9339 24.6801 23.7207C24.5541 23.4102 23.752 23.2353 23.2728 23.4417C21.5256 24.1932 16.9795 25.6658 14.3881 25.6658C13.6518 25.6658 13.1202 25.5443 12.763 25.2957C11.9418 24.7214 11.9001 23.7708 11.8371 22.3319C11.7899 21.289 10.5614 20.2889 9.87458 20.2889Z" fill="#A5B3B2"/>
</svg>
<div class="a11y_box">
<p class="a11y_ads-txt">Ever wondered how PWDs navigate your site?</p>
<p class="a11y_ads-link-txt">Check out our <a href="https://govtechsg.github.io/purple-banner-embeds/" target="_blank" class="a11y_ads-link"> Project Playground</a></p>
</div>
<div class="a11y_ads-container">
<svg class="a11y_ads-svg" width="72" height="72" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.3817 16.5071C33.3817 25.0042 26.4984 31.8892 18.0001 31.8892C9.50187 31.8892 2.61743 25.0042 2.61743 16.5071C2.61743 8.01 9.50243 1.125 18.0001 1.125C26.4978 1.125 33.3817 8.01 33.3817 16.5071Z" fill="#FFDD67"/>
<path d="M27.0224 5.99852C25.1442 4.90783 22.8779 4.7087 20.8389 5.45795C20.5571 5.56652 20.1093 4.53376 20.4519 4.40326C22.8031 3.53926 25.4199 3.76708 27.5866 5.02708C27.9022 5.21608 27.2801 6.1577 27.0241 5.99852" fill="#917524"/>
<path d="M14.0231 7.88064C12.146 6.78995 9.87915 6.59083 7.83897 7.33952C7.55828 7.4492 7.1094 6.41645 7.45253 6.28539C9.80434 5.42139 12.4211 5.64977 14.5878 6.90977C14.9023 7.09764 14.2818 8.03477 14.0253 7.88064" fill="#917524"/>
<path d="M22.2778 21.2489H13.7211C13.2733 21.2489 13.2733 19.7104 13.7211 19.7104H22.2784C22.7261 19.7104 22.7261 21.2489 22.2778 21.2489Z" fill="#664E27"/>
<path d="M12.0622 16.0381C14.3431 16.0381 16.1921 14.1891 16.1921 11.9082C16.1921 9.62733 14.3431 7.77832 12.0622 7.77832C9.78138 7.77832 7.93237 9.62733 7.93237 11.9082C7.93237 14.1891 9.78138 16.0381 12.0622 16.0381Z" fill="white"/>
<path d="M13.189 12.2856C14.3294 12.2856 15.2539 11.3611 15.2539 10.2207C15.2539 9.08027 14.3294 8.15576 13.189 8.15576C12.0485 8.15576 11.124 9.08027 11.124 10.2207C11.124 11.3611 12.0485 12.2856 13.189 12.2856Z" fill="#664E27"/>
<path d="M23.9365 16.0381C26.2174 16.0381 28.0664 14.1891 28.0664 11.9082C28.0664 9.62733 26.2174 7.77832 23.9365 7.77832C21.6556 7.77832 19.8066 9.62733 19.8066 11.9082C19.8066 14.1891 21.6556 16.0381 23.9365 16.0381Z" fill="white"/>
<path d="M25.0633 12.286C26.204 12.286 27.1288 11.3613 27.1288 10.2205C27.1288 9.07978 26.204 8.15503 25.0633 8.15503C23.9226 8.15503 22.9978 9.07978 22.9978 10.2205C22.9978 11.3613 23.9226 12.286 25.0633 12.286Z" fill="#664E27"/>
<path d="M23.0338 22.9701C20.6387 23.9995 14.4624 25.831 13.1 24.8804C12.4886 24.4523 12.456 23.6558 12.3964 22.2906C12.3367 20.9434 10.7921 19.7217 9.81842 19.7684C8.65235 19.8235 8.13879 20.7601 8.74517 21.8778C10.0777 24.3286 8.53423 25.4592 8.78792 27.4099C8.93417 28.5406 8.89985 30.457 11.0182 32.5501C13.4134 34.9171 16.8092 34.3619 17.9696 34.1194C19.3387 33.8343 19.9085 33.6829 20.1251 33.0096C20.3647 32.2649 20.1735 32.1248 20.2787 31.852C20.5093 31.2563 20.6848 31.2946 20.7281 30.6589C20.7754 29.9671 20.2348 29.6763 20.2961 29.3331C20.421 28.6182 21.0335 28.6103 20.1589 27.0983C22.1265 26.4481 23.3921 25.9098 24.4687 25.0351C26.4195 23.4533 24.3045 22.4228 23.0338 22.9701Z" fill="white"/>
<path d="M15.8061 34.8751C13.7086 34.8751 11.912 34.1945 10.6098 32.9075C8.59208 30.914 8.40027 29.0757 8.27427 27.8596C8.26021 27.7223 8.24615 27.593 8.23096 27.4726C8.12127 26.6277 8.30521 25.942 8.48183 25.2777C8.74452 24.2967 8.97065 23.4496 8.24446 22.1125C7.84958 21.3852 7.82427 20.6478 8.17471 20.0886C8.48915 19.588 9.07808 19.282 9.79133 19.2488C9.80146 19.2483 9.86558 19.2466 9.87458 19.2466C11.1756 19.2466 12.8879 20.6703 12.9593 22.2695C13.0167 23.5711 13.0606 24.1994 13.4397 24.4643C13.5083 24.5121 13.739 24.6246 14.3875 24.6246C16.6943 24.6246 21.0228 23.2606 22.798 22.4973C23.0961 22.3685 23.441 22.301 23.7931 22.301C24.697 22.301 25.4772 22.724 25.7331 23.3545C25.8867 23.7336 25.9756 24.5071 24.841 25.4279C23.7863 26.284 22.5854 26.8235 20.9378 27.391C21.3248 28.2359 21.1983 28.6364 20.98 29.078C20.9277 29.1843 20.885 29.2715 20.8608 29.3783C20.8782 29.4149 20.9176 29.4779 20.9468 29.5257C21.0993 29.7715 21.3282 30.1428 21.2905 30.6923C21.2579 31.1688 21.1572 31.3724 21.0065 31.6295C20.9451 31.7352 20.881 31.8432 20.809 32.0283C20.8051 32.044 20.8085 32.0958 20.8107 32.134C20.8208 32.3286 20.8371 32.6228 20.6645 33.1589C20.3427 34.1596 19.3988 34.3565 18.0938 34.6276C17.2968 34.7941 16.5486 34.8751 15.8061 34.8751ZM9.87458 20.2889C9.61415 20.3007 9.30196 20.3654 9.14727 20.6123C8.99146 20.8604 9.02858 21.2361 9.24965 21.6434C10.1626 23.3247 9.84983 24.4947 9.57365 25.5275C9.4139 26.1265 9.26258 26.693 9.34752 27.3477C9.36383 27.476 9.37846 27.6126 9.39365 27.7589C9.51233 28.8985 9.6749 30.46 11.4305 32.1937C12.5301 33.2815 14.0022 33.8322 15.8061 33.8328C16.4643 33.8328 17.132 33.7602 17.8475 33.61C19.2138 33.3254 19.4736 33.214 19.5878 32.8602C19.7048 32.4963 19.6953 32.3309 19.688 32.1852C19.6801 32.0502 19.6716 31.882 19.751 31.6761C19.8522 31.4151 19.9484 31.2515 20.0187 31.1311C20.1138 30.9696 20.1492 30.9083 20.1689 30.6254C20.1846 30.3886 20.0907 30.2367 19.9715 30.0438C19.8432 29.8368 19.684 29.5791 19.7436 29.2473C19.7892 28.9846 19.8826 28.7956 19.958 28.6437C20.0856 28.3861 20.1695 28.2156 19.6649 27.3443C19.5878 27.211 19.5771 27.0524 19.6362 26.9106C19.6947 26.7695 19.8173 26.6581 19.972 26.6075C21.7973 26.0039 23.0585 25.4886 24.1002 24.6438C24.5496 24.2787 24.7673 23.9339 24.6801 23.7207C24.5541 23.4102 23.752 23.2353 23.2728 23.4417C21.5256 24.1932 16.9795 25.6658 14.3881 25.6658C13.6518 25.6658 13.1202 25.5443 12.763 25.2957C11.9418 24.7214 11.9001 23.7708 11.8371 22.3319C11.7899 21.289 10.5614 20.2889 9.87458 20.2889Z" fill="#A5B3B2"/>
</svg>
<div class="a11y_box">
<p class="a11y_ads-txt">Ever wondered how PWDs navigate your site?</p>
<p class="a11y_ads-link-txt">Check out our <a href="https://govtechsg.github.io/purple-banner-embeds/" target="_blank" class="a11y_ads-link"> Project Playground</a></p>
</div>
</main>
</div>
</body>
</html>

0 comments on commit 0c703a5

Please sign in to comment.