60 lines
2.9 KiB
HTML
60 lines
2.9 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>FluentUI Emoji</title>
|
||
|
|
<link rel="stylesheet" id="emoji-css" href="/css/animated.css">
|
||
|
|
<style>
|
||
|
|
body {display: flex; flex-flow: row wrap; justify-content:space-evenly; gap: 20px; background-color: #fff; color: #000; font-size: 18px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
|
||
|
|
body{ --fluentui-high-contrast-color:#0088FF; }
|
||
|
|
figure {text-align: center;}
|
||
|
|
figure>:not(figcaption) { width: 256px; height: 256px; display:block; }
|
||
|
|
textarea {width: 100%; border-color: #000;}
|
||
|
|
#style-selector {flex-basis: 100%; text-align: center;}
|
||
|
|
#style-selector select { font-size: 25px; border-radius: 8px; padding: 10px; margin: 4px; border-color:#000; }
|
||
|
|
#style-selector textarea {text-align: center; padding:8px;}
|
||
|
|
[loading="lazy"]{content:none; mask-image: none;}
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
body, textarea, #style-selector select { background-color: #000; color: #fff; border-color: #fff; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="style-selector">
|
||
|
|
<select>
|
||
|
|
<option value="/css/animated.css">Animated</option>
|
||
|
|
<option value="/css/3d.css">3D</option>
|
||
|
|
<option value="/css/color.css">Color</option>
|
||
|
|
<option value="/css/flat.css">Flat</option>
|
||
|
|
<option value="/css/high-contrast.css">High Contrast</option>
|
||
|
|
<option value="/css/high-contrast-mask.css">High Contrast (as mask)</option>
|
||
|
|
</select>
|
||
|
|
<textarea><link rel="stylesheet" href="/css/animated.css"></textarea>
|
||
|
|
</div>
|
||
|
|
{{content}}
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
// functionality for style selector dropdown and lazily loading images
|
||
|
|
const imageObserver = new IntersectionObserver((entries, observer) => entries.forEach(function(entry) {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
entry.target.setAttribute('loading', 'loaded')
|
||
|
|
imageObserver.unobserve(entry.target)
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
function setCss(path) {
|
||
|
|
document.querySelectorAll('[loading]:not([loading="lazy"])').forEach(e => {
|
||
|
|
e.setAttribute('loading', 'lazy')
|
||
|
|
imageObserver.observe(e)
|
||
|
|
})
|
||
|
|
document.querySelector('#style-selector textarea').value = `<link rel="stylesheet" href="${path.startsWith('/') ? new URL(window.location.href).origin : ''}${path}">`
|
||
|
|
if(path.endsWith('high-contrast-mask.css')) {
|
||
|
|
document.querySelector('#style-selector textarea').value +=`\n<style>html{--fluentui-high-contrast-color:#0088FF; /* your color here */}</style>`
|
||
|
|
}
|
||
|
|
document.getElementById('emoji-css').href = path
|
||
|
|
}
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
document.querySelectorAll('[loading="lazy"]').forEach(image => imageObserver.observe(image))
|
||
|
|
document.querySelector('#style-selector select').addEventListener('change', (ev) => setCss(ev.target.value))
|
||
|
|
setCss(document.getElementById('emoji-css').href)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</html>
|