<div class="fancy-slider mySlider">
	<div class="slide" data-transition="fade" style="background-image: url('https://images.unsplash.com/photo-1576313269137-5c777923908f');">
		<div class="caption caption-top caption-center caption-slideUp">
			<h1><strong>Fancy UI</strong></h1>
		</div>
		<div class="caption caption-top caption-center caption-slideUp" style="top:20%;">A collection of UI widgets</div>
		<div class="caption caption-bottom caption-right">
			<strong>Leopard (Panthera pardus)</strong><br />
			<em><a href="https://unsplash.com/@hans_veth" target="_blank">— Hans Veth</a></em>
		</div>
	</div>
	... More slides...
</div>

<script>
new fancySlider(".mySlider", {
	navigation: true,
	autoplay: true
});
</script>
			

<div class="fancy-parallax-scroll myParallaxScroll" style="height:200px; background-image: url('https://images.unsplash.com/photo-1706883376540-b21e5559fc45');"></div>

<script>
new fancyParallaxScroll(".myParallaxScroll");
</script>
			

<div class="fancy-sticky-background" style="height:400px; background-image: url('https://images.unsplash.com/photo-1610568781018-995405522539?q=80&w=1920');">
...
</div>
			

<div class="fancy-tabs" style="min-height:200px;">
	<ul class="tabs">
		<li data-icon="<i class='fa-solid fa-house'></i>" data-opens="tab-content-1" class="active">Home</li>
		<li data-icon="<i class='fa-solid fa-music'></i>" data-opens="tab-content-2">Music</li>
		<li data-icon="<i class='fa-solid fa-comments'></i>" class="disabled">Comments (disabled)</li>
		<li data-icon="<i class='fa-solid fa-gear'></i>" data-opens="tab-content-4">Settings</li>
		<li data-icon="<i class='fa-brands fa-google' style='color:#34A853;'></i>" class="spacer"><a href="https://google.se">Google</a></li>
	</ul>
	<section data-id="tab-content-1">
		<h3>Home</h3>
		<p>Lorem ipsum...</p>
	</section>
	<section data-id="tab-content-2">
		<h3>Music</h3>
		<p>Lorem ipsum...</p>
	</section>
	<section data-id="tab-content-4">
		<h3>Settings</h3>
		<p>Lorem ipsum...</p>
	</section>
</div>
<script>
new fancyTabs();
</script>
			

<div class="myContextMenu">
...Context menu enabled area...
</div>

<script id="fancy-context-menu" type="text/x-fancytemplate">
...Context menu markup...
</script>

<script>
new fancyContextMenu(document.querySelectorAll(".myContextMenu"), {
	onClick: (event, link) => {
		console.log(link.href);
	},
	content: "#fancy-context-menu"
});
</script>
			

<div id="fancy-alert-here"></div>
<script>
	let myAlert = new fancyAlert("#fancy-alert-here").show("<strong>Information</strong>This is an information alert.", {
		icon: '<i class="fa-solid fa-circle-info"></i>',
		discrete: true
	});
</script>
			

<label>Social security number</label>
<input type="text" placeholder="YYYY MM DD-NNNN" data-slots="YMDN" data-validate="^\d{4} \d{2} \d{2}-\d{4}$" size="15" title="Enter social security number" />
<label>Credit card</label>
<input type="text" placeholder=".... .... .... ...." data-slots="." data-accept="\d" size="19" data-validate="^\d{4} \d{4} \d{4} \d{4}$" title="Enter credit card number" />
			

<input type="text" class="autocomplete" data-autocomplete="#lorem,#ipsum,#solar,#amet,#foo,#bar,#baz" placeholder="Enter #tags..." autocomplete="off">
<script>
new fancyAutocomplete(".autocomplete");
</script>

let dialogData = await fancyDialog({
	content: document.querySelector("#fancyDialogContent"),
	initialValues: { name: "Charles", serial: 123456 },
	buttons: ["Create",{ text:"Abort", type:"abort" }]
}).promise;
if(dialogData.action==="create"){
	new fancyAlert("#fancydialog").show("<strong>Result</strong>"+JSON.stringify(dialogData), {
		icon: '<i class="fa-solid fa-circle-info"></i>',
		discrete: true
	});
}
			

document.querySelector("#fancyblocker button").addEventListener("click", async (evt) => {
	evt.preventDefault();
	let blocker = new fancyBlocker({spinner:true}).show();
	window.setTimeout(()=>{
		blocker.hide();
	}, 5000);
	return false;
}